防抖和节流实现

客官°小女子只卖身不卖艺 2022-09-08 14:51 230阅读 0赞

# 防抖 #

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

/** * 防抖 * 在事件被触发后 n 秒再执行回调，如果在这 n 秒内又被触发，则重新计时 * @param {*} fn * @param {*} wait */
    let timer = null;
    function debounce(fn, wait) { 
      return function () { 
        let context = globalThis;
        let args = arguments;
        if (timer) { 
          clearTimeout(timer);
          timer = null;
        }
        // n 秒之后执行
        timer = setTimeout(() => { 
          // 使 fn 返回的 this 指向不变，并能接收到原有的参数
          fn.apply(context, args);
        }, wait);
      }
    }

1.  测试

function log(data) { 
      console.log(data || 'default');
      console.timeEnd('time');
    }
    
    console.time('time');
    debounce(log, 1000)()
    setTimeout(debounce(() => {  log('hello') }, 1000), 500);

运行结果  
![在这里插入图片描述][b18fa7d3f37d45838206f7f0036ecbfe.png]

# 节流 #

1.  在一个单位时间内只能触发一次，如果这个单位时间内触发多次，只执行第一次
2.  实现

/** * 节流 * 在一个单位时间内只能触发一次，如果这个单位时间内触发多次，只执行第一次 */
     // 方法一：通过时间戳计算实现
    let previous = 0;
    function throttle(fn, delay) { 
      return function () { 
        let context = this;
        let args = arguments;
        let now = Date.now();
        if (now - previous > delay) { 
          fn.apply(context, args);
          previous = now;
        }
      }
    }
    
    // 方法二：通过定时器实现
    let timer = null;
    function throttle1(fn, delay) { 
      return function () { 
        let context = this;
        let args = arguments;
        let canRun = !timer;
        timer = setTimeout(() => { 
          timer = null;
        }, delay);
        canRun && fn.apply(context, args);
      }
    }

1.  测试

运行结果  
![在这里插入图片描述][50558434203a407d905604543c3c876d.png]

[b18fa7d3f37d45838206f7f0036ecbfe.png]: /images/20220829/f0bfcf0360a54bbdb55daa5f45d8e88c.png
[50558434203a407d905604543c3c876d.png]: /images/20220829/5da0dde0477f452d87cee4d73a207dce.png