debounce

throttle（节流）和debounce（防抖）

• 节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效
• 防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时（前缘防抖、后缘防抖）

防抖和节流是针对响应跟不上触发频率这类问题的两种解决方案。 在给DOM绑定事件时，有些事件我们是无法控制触发频率的。 如鼠标移动事件onmousemove, 滚动滚动条事件onscroll，窗口大小改变事件onresize，瞬间的操作都会导致这些事件会被高频触发。 如果事件的回调函数较为复杂，就会导致响应跟不上触发，出现页面卡顿，假死现象。 在实时检查输入时，如果我们绑定onkeyup事件发请求去服务端检查，用户输入过程中，事件的触发频率也会很高，会导致大量的请求发出，响应速度会大大跟不上触发。

debounce，去抖动。策略是当事件被触发时，设定一个周期延迟执行动作，若期间又被触发，则重新设定周期，直到周期结束，执行动作。 这是debounce的基本思想，在后期又扩展了前缘debounce，即执行动作在前，然后设定周期，周期内有事件被触发，不执行动作，且周期重新设定。

延迟debounce，示意图（动作在有效周期内后置）

前缘debounce，示意图（动作前置）

debounce的特点是当事件快速连续不断触发时，动作只会执行一次。 延迟debounce，是在周期结束时执行，前缘debounce，是在周期开始时执行。但当触发有间断，且间断大于我们设定的时间间隔时，动作就会有多次执行。

debounce 的实现：

版本1: 周期内有新事件触发，清除旧定时器，重置新定时器；这种方法，需要高频的创建定时器。

暴力版： 定时器期间，有新操作时，清空旧定时器，重设新定时器

var debounce = (fn, wait) => {
    let timer, timeStamp=0;
    let context, args;
    let run = ()=>{
    timer= setTimeout(()=>{
      fn.apply(context,args);
    }, wait);
    }
    let clean = () => {
      clearTimeout(timer);
    }
    return function(){
    context=this;
    args=arguments;
    let now = (new Date()).getTime();
    if (now-timeStamp < wait) {
      console.log('reset',now);
      clean();  // clear running timer 
      run();    // reset new timer from current time
    } else {
      console.log('set',now);
      run();    // last timer alreay executed, set a new timer
    }
    timeStamp=now;
    }
}

版本2: 周期内有新事件触发时，重置定时器开始时间撮，定时器执行时，判断开始时间戳，若开始时间戳被推后，重新设定延时定时器。

// 优化版： 定时器执行时，判断start time 是否向后推迟了，若是，设置延迟定时器

var debounce = (fn, wait) => {
    let timer, startTimeStamp=0;
    let context, args;
    let run = (timerInterval)=>{
    timer= setTimeout(()=>{
      let now = (new Date()).getTime();
      let interval = now - startTimeStamp
      if(interval < timerInterval){
        // the timer start time has been reset, so the interval is less than timerInterval
        console.log('debounce reset',timerInterval-interval);
        startTimeStamp=now;
        run(wait-interval);  // reset timer for left time 
      } else {
        fn.apply(context,args);
        clearTimeout(timer);
        timer=null;
      }
    }, timerInterval);
    }
    return function(){
    context=this;
    args=arguments;
    let now = (new Date()).getTime();
    startTimeStamp=now;
    if(!timer){
      console.log('debounce set',wait);
      run(wait);    // last timer alreay executed, set a new timer
    }
    }
}

版本3: 在版本2基础上增加是否立即执行选项：

// 增加前缘触发功能

var debounce = (fn, wait, immediate=false) => {
    let timer, startTimeStamp=0;
    let context, args;
    let run = (timerInterval)=>{
    timer= setTimeout(()=>{
      let now = (new Date()).getTime();
      let interval=now-startTimeStamp
      if(interval<timerInterval){ // the timer start time has been reset，so the interval is less than timerInterval
        console.log('debounce reset',timerInterval-interval);
        startTimeStamp=now;
        run(wait-interval);  // reset timer for left time 
      }else{
        if(!immediate){
          fn.apply(context,args);
        }
        clearTimeout(timer);
        timer=null;
      }
    },timerInterval);
    }
    return function(){
    context=this;
    args=arguments;
    let now = (new Date()).getTime();
    startTimeStamp=now; // set timer start time
    if(!timer){
      console.log('debounce set',wait);
      if(immediate) {
      fn.apply(context,args);
      }
      run(wait);    // last timer alreay executed, set a new timer
    }
    }
}

https://blog.csdn.net/hupian1989/article/details/80920324