js 手写防抖

使用场景：

多次操作只执行第一次操作。

可以用于用户点击按钮事件防抖操作。

多次操作只执行最后一次操作。

 可以搜索输入框，输入多个字符进行搜索，当输入停止之后进行搜索操作者。

方法如下：

   /**
   * 防抖
   * @param {function} fn 执行函数
   * @param {number} wait 等待时间，毫秒
   * @param {boolean} immediate 是否立即执行
   */
  debounce: function (fn, wait, immediate) {
    let timeout; // 局部全局变量
    return function (...args) {
      let context = this;
      if (timeout) clearTimeout(timeout); // 清除计时器，但是timeout本身还在，只是不会在执行
 
      if (immediate) { // 总是执行第一次操作
        let callNow = !timeout; // 第一次为true
        // 多次操作，timeout初始化，多次触发只有当wait等待时间结束timeout才为空
        timeout = setTimeout(function () {
          timeout = null;
        }, wait);
        // 第一次为true, 执行
        if (callNow) fn.apply(context, args);
      } else { // 总是执行最后一次操作
        timeout = setTimeout(function () {
          fn.apply(context, args);
        }, wait);
      }
    };
  },

使用

    /**
     * 多次点击事件，只执行第一次点击事件
     */
    const entryClick = debounce(
      function () {
        console.log("多次点击事件，只执行第一次点击事件");
      }, 500, true)

    /**
     * 输入多个字符，字符变化事件，只执行最后一次搜索
     */
    const entryClick = debounce(
      function () {
        console.log("多次点击事件，只执行第一次点击事件");
      }, 500)