throttle debounce 总结

理解throttle debounce

• 比较
  二者本质：都是限制频繁触发
  二者区别：
  throttle: 节流阀，保证多少ms内只执行一次。
  debounce: 去抖，保证多少ms内不再被触发时就会执行一次。
• 类比电梯策略理解：
  throttle：第一个人进来后15s运送一次，不等待。
  debounde：第一个人进来15s后运送一次，假设15s内又有人进来，重新计时，一直到15s内不再有人进来则运送一次
• 一秒理解 throttle debounce：http://demo.nimius.net/debounce_throttle/

throttle debounce 实现

以throttle-debounce 包代码解析：
debounce.js:

var throttle = require('./throttle');
module.exports = function ( delay, atBegin, callback ) {
    return callback === undefined ? throttle(delay, atBegin, false) : throttle(delay, callback, atBegin !== false);
};

throttle.js:

module.exports = function ( delay, noTrailing, callback, debounceMode ) {
    var timeoutID;
    // Keep track of the last time `callback` was executed.
    var lastExec = 0;
    if ( typeof noTrailing !== 'boolean' ) {
        debounceMode = callback;
        callback = noTrailing;
        noTrailing = undefined;
    }
    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);
        }
        function clear () {
            timeoutID = undefined;
        }
        if ( debounceMode && !timeoutID ) {
            exec();
        }
        if ( timeoutID ) {
            clearTimeout(timeoutID);
        }
        if ( debounceMode === undefined && elapsed > delay ) { 
            // throttle时，根据时间戳之差是否大于delay决定是否执行回调          
            exec();
        } else if ( noTrailing !== true ) {
            // debounce时，setTimeout延迟执行回调
            timeoutID = setTimeout(debounceMode ? clear : exec, debounceMode === undefined ? delay - elapsed : delay);
        }
    }
    return wrapper;
};

应用
shop.js: // 输入关键字查询门店

import { throttle, debounce } from 'throttle-debounce';
...
debounce(200, async(val) => { await this.getShopList(val); });
...

还可以参考underscore, lodash 中throttle, debounce的实现，做了更多的兼容和考虑。

throttle debounce 应用场景

throttle:
监听resize事件做一些DOM元素的定位更改；
监听scroll 事件判断上拉时是否要加载数据
debounce:
搜索框输入发送ajax请求，监听onchange or keyup 事件进行查询;

Reference

1.https://github.com/lishengzxc/bblog/issues/7
2.http://www.jianshu.com/p/fb08b7ef31de