/**
* @function promise版 函数节流 (函数装饰器)
* @param fn 要节流的函数
* @param delay 节流时间(毫秒)
* @param mustRunDelay 必须执行的时间间隔(毫秒)(用于拖拽等,防止闪跳)
* @return function 处理过的已节流的函数
*/
function throttle(fn, delay, mustRunDelay) {
let timer = null;
let tStart;
let firstRun = true;
return function(...args) {
return new Promise((resolve) => {
const tCurr = Date.now();
tStart = tStart || tCurr;
clearTimeout(timer);
if (mustRunDelay && tCurr - tStart >= mustRunDelay) {
tStart = tCurr;
resolve(fn.apply(this, ...args));
} else if (firstRun) {
firstRun = false;
resolve(fn.apply(this, ...args));
} else {
timer = setTimeout(() => {
firstRun = true;
resolve(fn.apply(this, ...args));
}, delay);
}
});
};
}
参数说明:mustRunDelay 在此时间内必须执行一次,常用于拖拽等在一段时间内必须执行的情况。
假如不设此参数,就可能出现拖拽时从一点闪跳到另一点,没有拖动过程的情况。
样例:
// 原未节流函数
const onClick = function() {
alert('click button!');
}
// onClickThrottle 就是节流处理过的函数
const onClickThrottle = throttle(onClick, 2000);