throttle-debounce

函数节流 throttle 和 函数 去抖 debounce

下载 npm i throttle-debounce

应用场景

以下场景往往由于事件频繁被触发，因而频繁执行DOM操作、资源加载等重行为，导致UI停顿甚至浏览器崩溃。

1. window对象的resize、scroll事件

2. 拖拽时的mousemove事件

3. 射击游戏中的mousedown、keydown事件

4. 文字输入、自动完成的keyup事件
   实际上对于window的resize事件，实际需求大多为停止改变大小n毫秒后执行后续处理；而其他事件大多的需求是以一定的频率执行后续处理。针对这两种需求就出现了debounce和throttle两种解决办法。

throttle 限制回调函数的执行频率

将水龙头拧紧直到水是以水滴的形式流出，那你会发现每隔一段时间，就会有一滴水流出。
　也就是会说预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期。

@param delay 延迟的时间
@param noTrailing 在最后一次调用时是否执行 callback true 不执行, false 执行
@param callback 回调函数
@param  debounceMode
debounceMode 为true时,在被调用时, 先执行callback,在没有被调用时,在指定的延迟之后执行
clear,如果在clear执行之前继续调用,会重置定时器. 
为false时,在被调用时,不会执行callback,在指定的延迟之后执行callback,
如果在callback执行之前继续调用,会重置定时器

  const throttle = function(delay, noTrailing, callback, debounceMode) {

    // After wrapper has stopped being called, this timeout ensures that
    // `callback` is executed at the proper times in `throttle` and `end`
    // debounce modes.
    var timeoutID;

    // Keep track of the last time `callback` was executed.
    var lastExec = 0;

    // `noTrailing` defaults to falsy.
    if (typeof noTrailing !== 'boolean') {
      debounceMode = callback;
      callback = noTrailing;
      noTrailing = undefined;
    }

    // The `wrapper` function encapsulates all of the throttling / debouncing
    // functionality and when executed will limit the rate at which `callback`
    // is executed.
    function wrapper() {

      var self = this;
      var elapsed = Number(new Date()) - lastExec;
      var args = arguments;

      // Execute `callback` and update the `lastExec` timestamp.
      function exec() {
        lastExec = Number(new Date());
        callback.apply(self, args);
      }

      // If `debounceMode` is true (at begin) this is used to clear the flag
      // to allow future `callback` executions.
      function clear() {
        timeoutID = undefined;
      }

      if (debounceMode && !timeoutID) {
        // Since `wrapper` is being called for the first time and
        // `debounceMode` is true (at begin), execute `callback`.
        exec();
      }

      // Clear any existing timeout.
      if (timeoutID) {
        clearTimeout(timeoutID);
      }

      if (debounceMode === undefined && elapsed > delay) {
        // In throttle mode, if `delay` time has been exceeded, execute
        // `callback`.
        exec();

      } else if (noTrailing !== true) {
        // In trailing throttle mode, since `delay` time has not been
        // exceeded, schedule `callback` to execute `delay` ms after most
        // recent execution.
        //
        // If `debounceMode` is true (at begin), schedule `clear` to execute
        // after `delay` ms.
        //
        // If `debounceMode` is false (at end), schedule `callback` to
        // execute after `delay` ms.
        timeoutID = setTimeout(debounceMode ? clear : exec, debounceMode === undefined ? delay - elapsed : delay);
      }

    }

    // Return the wrapper function.
    return wrapper;

  };

  const throttleFunc = throttle(1000, false, (num) => {
    console.log('num:', num);
  }, false);

  window.onresize = () => (() => {
    console.log('111');
    throttleFunc(1);
  })();

debounce去抖限制回调函数的执行频率

不同于throttle的是,debounce能保证在一系列调用的时候内,函数只执行一次

@param deply 延迟的时间
@param atBegin
@param callback 目标回调函数

atBegin: 为true时,在被调用时,会马上执行callback,如果在延迟时候之前继续
调用,不会执行callback
为false时,在被调用时,不会执行callback,在延迟时间之后会执行callback,如果
在延迟时间之前继续调用,会重置定时器

function throttle(delay, noTrailing, callback, debounceMode) {

   // After wrapper has stopped being called, this timeout ensures that
   // `callback` is executed at the proper times in `throttle` and `end`
   // debounce modes.
   var timeoutID;

   // Keep track of the last time `callback` was executed.
   var lastExec = 0;

   // `noTrailing` defaults to falsy.
   if (typeof noTrailing !== 'boolean') {
     debounceMode = callback;
     callback = noTrailing;
     noTrailing = undefined;
   }

   // The `wrapper` function encapsulates all of the throttling / debouncing
   // functionality and when executed will limit the rate at which `callback`
   // is executed.
   function wrapper() {

     var self = this;
     var elapsed = Number(new Date()) - lastExec;
     var args = arguments;

     // Execute `callback` and update the `lastExec` timestamp.
     function exec() {
       lastExec = Number(new Date());
       callback.apply(self, args);
     }

     // If `debounceMode` is true (at begin) this is used to clear the flag
     // to allow future `callback` executions.
     function clear() {
       timeoutID = undefined;
     }

     if (debounceMode && !timeoutID) {
       // Since `wrapper` is being called for the first time and
       // `debounceMode` is true (at begin), execute `callback`.
       exec();
     }

     // Clear any existing timeout.
     if (timeoutID) {
       clearTimeout(timeoutID);
     }

     if (debounceMode === undefined && elapsed > delay) {
       // In throttle mode, if `delay` time has been exceeded, execute
       // `callback`.
       exec();

     } else if (noTrailing !== true) {
       // In trailing throttle mode, since `delay` time has not been
       // exceeded, schedule `callback` to execute `delay` ms after most
       // recent execution.
       //
       // If `debounceMode` is true (at begin), schedule `clear` to execute
       // after `delay` ms.
       //
       // If `debounceMode` is false (at end), schedule `callback` to
       // execute after `delay` ms.
       timeoutID = setTimeout(debounceMode ? clear : exec, debounceMode === undefined ? delay - elapsed : delay);
     }

   }

   // Return the wrapper function.
   return wrapper;

 }

 const debounce = function(delay, atBegin, callback) {
   return callback === undefined ? throttle(delay, atBegin, false) : throttle(delay, callback, atBegin !== false);
 };

 const debounceFunc = debounce(1000, false, (num) => {
   console.log('num:', num);
 }, false);

 window.onresize = () => (() => {
   console.log('111');
   debounceFunc(1);
 })();