9012年了，不做不懂函数防抖和函数节流的前端

概述

• 函数防抖: 任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。
• 函数节流: 指定时间间隔内只会执行一次任务，原本可能会无时无刻执行的函数。

总之都是为了节省计算资源。

函数防抖（debounce）

场景：

• 如今很多网站为了提高用户体验，不会再输入框失去焦点的时候再去判断用户名是否被占用，而是在输入的时候就在判断这个用户名是否已被注册。当用户输入第一个字符后的一段时间内如果还有字符输入的话，那就暂时不去请求判断用户名是否被占用。
• 用户注册时候的手机号码验证和邮箱验证

任务频繁触发的情况下，只有足够的空闲时间，才执行代码一次。

基本思想：通过闭包保存一个标记（timeout）来保存 setTimeout 返回的值，每当用户输入的时候把前一个 setTimeout clear 掉，然后又创建一个新的 setTimeout，这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 fn 函数了。

函数防抖的要点：也是需要一个setTimeout来辅助实现。延迟执行需要跑的代码。
如果方法多次触发，则把上次记录的延迟执行代码用clearTimeout清掉，重新开始。
如果计时完毕，没有方法进来访问触发，则执行代码。

// 函数防抖
function debounce(handlerFunc, interval = 300) {
    let timeout = null;
    return function () {
        clearTimeout(timeout);
        timeout = setTimeout(() => {
            handlerFunc.apply(this, arguments);
        }, interval);
    };
}

//绑定监听
window.addEventListener('resize', () => {
    debounce(this.onResize, 40)
}, false);

函数节流（throttle）

场景：过多的DOM相关操作可能会导致浏览器挂起，有时候甚至会崩溃。比如：onresize、onscroll、mousemove等。

为了避免类似问题，就可以使用定时器对该函数进行节流。

基本思想：某些代码不可以在没有间断的情况下连续重复执行，就是一定时间内函数只执行一次。

第一次调用函数，创建一个定时器，在指定的时间间隔之后运行代码。当第二次调用函数时，它会清除前一次的定时器并设置另一个。如果前一个定时器尚未执行，就是将其替换为一个新的定时器，目的是只有在执行函数的请求停止了一段时间之后才执行。

函数节流的要点：声明一个变量（resizeTimeout）当标志位，记录当前代码是否在执行。

• 如果空闲，则可以正常触发方法执行。
• 如果代码正在执行，则取消这次方法执行。

注意：只要是代码周期性执行的，都应该使用节流，但是并不能控制请求执行的速率。

// 函数节流
function throttle(handlerFunc, timeout = 66) {
  let resizeTimeout;
  if (!resizeTimeout) {
    resizeTimeout = setTimeout(() => {
      resizeTimeout = null;
      handlerFunc();
      // The actualResizeHandler will execute at a rate of 15fps
    }, timeout);
  }
}

//绑定监听
window.addEventListener('resize', () => {
    throttle(this.onResize, 40)
}, false);

总结

函数防抖和函数节流的名字起得易混淆，要找技巧理解记忆，通俗易懂的说：

• 函数防抖就像快递小哥先将外卖攒着一起，只有规定间隔内没有其他配单的时候，才集中送一次。

• 函数节流就像王者荣耀中人物释放技能之后，需要CD冷却时间过了，才可以再放。

  
  王者英雄王昭君

像这样，是不是就好理解这两个概念了