Throttle Debounce 总结
比较
二者本质：都是限制频繁触发
二者区别：
- throttle: 节流阀，保证多少ms内只执行一次。
- debounce: 去抖，保证多少ms内不再被触发时就会执行一次。
类比电梯策略理解：
throttle：第一个人进来后15s运送一次，不等待。
debounde：第一个人进来15s后运送一次，假设15s内又有人进来，重新计时，一直到15s内不再有人进来则运送一次
一秒理解 throttle debounce：http://demo.nimius.net/debounce_throttle/
throttle debounce 实现
export function throttle(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;
}
export function debounce(delay, atBegin, callback) {
return callback === undefined ? throttle(delay, atBegin, false) : throttle(delay, callback, atBegin !== false);
}
应用
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 事件进行查询;
