防抖节流代码分析

一、防抖

1. 功能描述：

300ms 内不许触发事件，只有间隔超过 300ms，回调函数才能被执行。

2. 应用场景：

在搜索框中通过拼音输入关键字时，不加任何处理的情况下，用户的输入每发生一次改变，就会进行一次搜索。

例如：我想搜索 “天气”，t 搜索一下，ti 搜索一下，tia 搜索一下 ... 输入完 tianqi，按下空格选中“天气”，最后会再搜索一下。按照我的想法，全部输入完了“天气”，搜索一次即可，结果每个符号都搜索了一次！

借助防抖，只需要判定在 500ms 内用户是否还在输入，如果已经停止，大致可以认为输入完毕了，只需要在这时进行一次搜素即可，极大地减轻了服务器的压力。

3. 代码分析：

<button id="btn">button</button>
<script>
  function myDebounce(func, wait, immediate) {
    let timer;

    return function () {
      let context = this;
      let args = arguments;

      // timer 不为空，表示间隔时间小于 delay，上一个定时器的回调还没有执行，需要先清空上一个定时器
      if (timer) clearTimeout(timer);
  
      if (immediate) {
        if (!timer) {
          func.apply(context, args);
        }
  
        timer = setTimeout(function () {
          timer = null;
        }, wait);
      } else {
        timer = setTimeout(function () {
          func.apply(context, args);
        }, wait);
      }
    };
  }
 
  var clickListenerCallback = myDebounce(function() {
    console.log( 'myDebounce-callBack');
  }, 1000, true);
  
  let btn = document.getElementById('btn');
  btn.addEventListener('click', clickListenerCallback);
</script>

   1. 为什么要将 timer 定义在函数之外？

定义在被返回的函数之外，借助闭包，可以保证每次操作的是同一个定时器 id，从而起到了延长 timer 生命周期的效果。

   2. 为什么要修改 func this 指向？

我们先看一下直接为事件绑定监听时，回调内的this指向：

<button id="btn">button</button>
<script>
  var scrollCallback = function() {
    console.log('没用防抖的 this: ', this);
  };
 
  let btn = document.getElementById('btn');
  btn.addEventListener('click', scrollCallback);
</script>

 

var clickListenerCallback = myDebounce(function () {
  console.log("未更改 this 指向时，this: ", this);
}, 1000, true );

func 中不修改 this 指向时，this 的真实指向：

原因很简单，我们显式地直接调用 myDebounce 方法，等于由 Window 调用 myDebounce，this 自然就指向了 Window。

而 myDebounce 返回的函数最终被绑定到了按钮的点击事件上，闭包中的 this 自然也就指向了按钮。

   3. myDebounce 第三个参数指定为 true 表示什么含义？

第三个参数置为 true 表示在在延迟开始前先调用一次回调，false 则是在延迟后触发回调。

   4. timer置为null

timer 保存着定时器的 id，但是定时器执行完后，timer 的值并不会被清除，需要在特定的时机进行清空，来表示定时器的回调已经被执行。

二、节流

1. 功能描述：

300ms 内触发触发事件无效，超过 300ms 后触发可以执行一次（连续高频触发可以保证每300ms被触发一次）

2. 应用场景

以外卖 App 为例，菜单向下滑动的过程中，scroll 事件会高频触发，计算实时坐标，根据坐标中数值所在范围，调节左侧分类的选中状态。基本上可以做到实时更新。

但真实的诉求是并不需要它如此精准。只需要在一个感知相对较小的时间间隔内更新即可。

因此，就需要为 scroll 事件的回调进行节流处理。

3. 代码分析

时间戳写法：

function myThrottle1(fn, delay = 500) {
  let oldtime = Date.now()
  return function (...args) {
    let newtime = Date.now()
    if (newtime - oldtime >= delay) {
      fn.apply(null, args)
      oldtime = Date.now()
    }
  }
}

定时器写法：

function myThrottle2(fn, delay = 500) {
    let timer = null
    return function (...args) {
        if (!timer) {
            timer = setTimeout(() => {
                fn.apply(this, args)
                timer = null
            }, delay);
        }
    }
}

---

 参考文章：

面试官：什么是防抖和节流？有什么区别？如何实现？ | web前端面试 - 面试官系列

JavaScript 防抖 - Web前端工程师面试题讲解_哔哩哔哩_bilibili

JS简单实现防抖和节流 - 掘金