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)
posted @   snail-2018  阅读(139)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示