乐趣区

防抖和节流多种实现可体验

jiezi

防抖（debounce）

概念

事件被触发经过单位时间 (delay) 后再执行回调，如果在单位时间内又被触发，则重新计时。

防抖函数

const debounce = (cb, delay = 1000) => {
  let timer = null;
  return function (...args) {
    const context = this;
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {cb.apply(context, args);
      timer = null;
    }, delay);
  }
}

若延迟 delay 设置为 1000(默认值)，则 cb(回调函数)只会在停止触发 1s 后执行，如果一直不断地触发，则回调函数始终不执行。

使用

下面是一个简单的使用示例，后续介绍的防抖和节流函数的使用方式也是相似的。

const callback = () => {console.log(Math.random());
}
const handle = debounce(callback, 1000);
window.addEventListener('scroll', handle);

防抖函数(第一次触发会立即执行)

const debounceImmediate = (cb, delay = 1000, immediate = true) => {
  let timer = null;
  return function (...args) {
    const context = this;
    const execNow = immediate && !timer;
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {cb.apply(context, args);
      timer = null;
    }, delay);
    execNow && cb.apply(this, args);
  }
}

当设置 immediate=true(默认值)、delay=1000(默认值)时，第一次触发会立即执行回调函数。后续执行和普通的防抖函数一样，只有在停止触发 1s 后回调函数才会执行，如果还是一直不断地触发，则回调函数始终不执行。

节流（throttle）

概念

规定在单位时间 (delay) 内，只能触发一次函数。如果单位时间内多次触发函数，只会执行一次回调。

节流函数(使用时间戳)

const throttleUseTimeStamp = (cb, delay = 1000) => {let startTime = Date.now();  
 return function(...args) {      
  const context = this;                        
  const now = Date.now();           
  if (now - startTime >= delay) {cb.apply(context, args);
      startTime = Date.now();}
 } 
}

若 delay=1000，则在 1s 内只会执行一次回调函数。

节流函数的实现(使用定时器)

const throttleUseTimer = (cb, delay) => {
  let timer = null;
  return function(...args) {
    const context = this;
    if (!timer) {timer = setTimeout(() => {cb.apply(context, args);      
        timer = null;      
      }, delay);  
    } 
  }
}

若 delay=1000，则在 1s 内只会执行一次回调函数。

节流函数的实现(第一次触发立即执行，最后一次触发也会执行)

const throttleExecMore = function(cb, delay) {
  let timer = null; 
  let startTime = Date.now();
  return function(...args) {const curTime = Date.now(); 
    const remaining = delay - (curTime - startTime); 
    const context = this;           
    timer && clearTimeout(timer);
    if (remaining <= 0) {
      // 第一次触发执行               
      cb.apply(context, args);              
      startTime = Date.now();} else {
      // 最后一次触发也会执行             
      timer = setTimeout(() => {cb.apply(context, args);
        timer = null;
      }, remaining);          
    }
  }
}

第一次触发会立即执行回调函数，最后一次触发也会执行一次回调函数。

亲自体验

将前面介绍的 5 种防抖和节流函数分别应用在 5 个输入框的 onChange 事件的监听上，delay 值统一设置为 1000，快速输入 1111 得到结果如下：

完全符合我们前面的分析。

如果不加防抖、节流控制，得到结果将是：

1
11
111
1111

触发了 4 次回调函数。

体验防抖和节流 (http://47.92.166.108:3000/blog/index.html#/tutorials/throttle-and-debounce)

体验网址二维码：

应用场景举例

防抖

  1. 搜索联想，在不断输入值时节约请求资源。
  2. 窗口 resize 事件

节流

  1. 鼠标不断点击，单位时间内只触发一次
  2. 滚动到底部加载更多

退出移动版