函数防抖和函数节流的最简单解释

函数防抖与节流详解

最新推荐文章于 2021-12-24 20:44:07 发布

转载最新推荐文章于 2021-12-24 20:44:07 发布 · 102 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/3body/p/10709438.html

本文详细介绍了JavaScript中的函数防抖和节流技术。函数防抖确保连续触发的事件只执行最后一次，常用于输入框搜索优化。而函数节流则保证了事件按固定频率触发，适用于无限滚动加载场景。通过具体代码示例，读者可以深入理解这两种技术的工作原理及应用场景。

函数防抖：连续触发的事件，只会触发最后一次。每次触发的时候都会清除上一次待触发的。

const debounce = (func, wait) => {
  let timer;

  return (params) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
　　　　func(params);
    }, wait);
  };
};

函数节流：连续触发的事件，会按照一定的频率触发N次。每间隔一定的时间，必然会触发一次。

const throttle = (func, wait) => {
  let timer;

  return (params) => {
    if (timer) {  // timer 存在则不会加入待执行中
      return;
    }

    timer = setTimeout(() => {
      func(params);
      timer = null;  // 间隔一定时间后执行一次，执行完后清空 timer 可再次执行
    }, wait);
  };
};