1、背景

在浏览器中部分事件如浏：resize、scroll、mousemove、mouseover、keypress等事件在触发时，会不断地调用绑定在事件上的回调函数，导致重复回调函数不断执行，耗费系统资源，导致前端性能下降。为了优化性能，需要对这类事件进行调用次数进行限制，而函数防抖和函数节流就是两种解决方案

2、函数防抖

2.1、函数防抖的定义：

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

就是说如果事件在持续，那么回调就一直不执行，直到N秒内事件不在发生，才会执行回调，示例代码如下：

var timer; //定时器
function debounce(fn, delay) {
   clearTimeout(timer);//如果delay时间没到，会清除掉定时器
   timer = setTimeout(function(){  //重新设定定时器
       fn();
   }, delay);
}

简单应用如下：

function testDebounce() {
   console.log('test');
}
document.onmousemove = () => {
 debounce(testDebounce, 1000);
}

如果鼠标1S内一直移动，则回调函数不会执行，从而大幅减少了回调函数的执行次数。

上面代码依赖全局变量timer，导致使用起来不太方便，采用闭包优化后如下：

function debounce(fn, delay) {
  var timer; //定时器
  return function () {
      var _this = this; // 取debounce执行作用域的this
      var args = arguments;
      if (timer) {
          clearTimeout(timer);
      }
      timer = setTimeout(function () {
          fn.apply(_this, args); // 用apply指向调用debounce的对象，相当于_this.fn(args);
      }, delay);
  };
}

2.2、适用场景

搜索框搜索输入，只需用户最后一次输入完，再发送请求。
手机号、邮箱验证输入检测。
窗口大小Resize，只需窗口调整完成后，计算窗口大小，防止重复渲染。

3、函数节流

3.1、函数节流的定义：

每隔一段时间，执行一次函数。

这个理解起来比较容易，就是无论期间发生多少次时间触发，回调函数固定时间执行一次。该方案适合有UI变化的场景，如果采用函数防抖方案，可能较长时间函数都不会被执行。代码实现如下：

function throttle(fn, delay) {
    var timer;
    return function () {
        var _this = this;
        var args = arguments;
        if (timer) {//没执行完直接返回，不再创建定时器，保证只执行一次
            return;
        }
        timer = setTimeout(function () {
            fn.apply(_this, args);
            timer = null; // 在delay后执行完fn之后清空timer，此时事件触发可以进入计时器
        }, delay)
    }
}

测试用例：

function testThrottle(e, content) {
   console.log(e, content);
}
var testThrottleFn = throttle(testThrottle, 1000); // 返回节流函数
document.onmousemove = function (e) {
   testThrottleFn(e, 'throttle'); // 给节流函数传参
}

3.2、适用场景

滚动加载，加载更多或滚到底部监听
拖动效果实现，根据帧率设计定时时间
高频点击提交，表单重复提交

3、异同

3.1、相同点：

都可以通过使用 setTimeout 实现
目的都是降低回调执行频率，节省计算资源

3.2、不同点：

函数防抖，在一段连续操作结束后，处理回调；函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能。
函数防抖关注一定时间连续触发的事件只在最后执行一次；函数节流侧重于一段时间内只执行一次。

深入浅出函数防抖和函数节流