防抖和节流

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

防抖函数（debounce）

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

概念

规定在一个单位时间内，只能触发一次函数。如果这个单位事件内触发多次函数，只有一次生效。

节流函数(使用时间戳)

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);          
    }
  }
}

适用场景

• 拖曳场景：固定时间只执行一次，防止超高频次触发位置变动
• 缩放场景：监控浏览器 resize
• 动画场景：避免短时间内多次触发动画引起性能问题