这两个概念应该是一个老生常谈的问题了，新手前端和高阶前端的区别也在于此。如何将JS效能优化到最合适的程度，如何保证页面更流畅的执行是前端永远绕不开的话题，而节流和防抖能有效的优化效能。下面我们一起看看：

防抖（Debounce）

一个被经常提起的例子：

上电梯的时候，大家陆陆续续进来，电梯的门不会关上，只有当一段时间都没有人上来，电梯才会关门。

Talk is cheap，我们直接 show code 吧。

先做基本的准备（篇幅原因，HTML部分省略）：

let container = document.getElementById(\container\);

// 事件处理函式

function handle(e) {

console.log(Math.random());

}

// 新增滚动事件

container.addEventListener(\scroll\, handle);

我们发现，每滚动一下，控制台就会打印出一行随机数。

基础防抖

我们现在写一个最基础的防抖处理：

function debounce(func, wait) {

var timeout;//标记

return function() {

clearTimeout(timeout);

timeout = setTimeout(func, wait);

}

}

事件也做如下改写：

container.addEventListener(\scroll\, debounce(handle, 1000));

现在试一下， 我们会发现只有我们停止滚动1秒钟的时候，控制台才会打印出一行随机数。

标准防抖

以上基础版本会有两个问题，请看如下程式码：

// 处理函式

function handle(e) {

console.log(this); //输出Window物件

console.log(e); //undefined

}

没错，当我们不使用防抖处理时，handle()函式的this指向呼叫此函式的container，而在外层使用防抖处理后，this的指向会变成Window。 其次，我们也要获取到事件物件event。

所以我们要对防抖函式做以下改写：

function debounce(fn, wait) {

let timeout;

return function() {

let that = this;

let arg = arguments;

clearTimeout(timeout);

timeout = setTimeout(function(){

fn.apply(that,arg)//使用apply改变this指向

}, wait);

}

}

当然了，如果使用箭头函式便可以省去外层宣告。

先触发式防抖

以上的情况都是只有当连续触发停止后才执行，那如果我们想让事件第一次触发就执行，后面的连续触发都不执行，直到停止触发一段时间才可以再次触发（比如防止频繁点选），该如何处理呢？

那么可以利用同样的原理，稍作修改即可：

function debounce(fn, wait) {

let timeout;

return function(){

let arg = arguments;

let that = this;

clearTimeout(timeout);

!timeout && fn.apply(that,arg)

timeout = setTimeout(function(){

timeout = null;

}, wait);

}

}

节流 (Throttle)

这有点像公交车， 无论在站点等车的人多不多，公交车只会按时来一班，不会来一个人就来一辆公交车。

标准节流

function throttle(fn, wait) {

let timeout;

return function () {

if (!timeout) {

timeout = setTimeout(() => {

timeout = null;

fn.apply(this, arguments)

}, wait)

}

}

}

用滚动事件来描述节流，其实是一个非常典型的场景，比如需要用滚动事件判断是否载入更多等。

先触发式节流

和防抖函式类似，以上的情况是先等待后触发，如果我们想让事件先触发后等待，该如何处理呢？网上大部分文章都告诉你用时间戳的方式去实现，其实只要像防抖一样稍作修改即可实现。

function throttle(fn, wait) {

let timeout;

return function () {

if (!timeout) {

fn.apply(this, arguments)

timeout = setTimeout(() => {

timeout = null;

}, wait)

}

}

}

这样，我们就会发现第一次触发函式就会立即生效。

总结