防抖動
var debounce = function (fn, delay, isImmediate) {
var timer = null;
// 默認不立即觸發(fā)
isImmediate = typeof isImmediate === "undefined" ? false : isImmediate;
return function () {
var ctx = this, // 保存作用域
args = arguments; // 保存參數(shù)
// 初始化清空所有定時器
if (timer) {
clearTimeout(timer);
}
// 如果是立即觸發(fā)
if (isImmediate) {
if (!timer) { // timer為空時觸發(fā)操作
fn.apply(ctx, args);
}
// delay時間后置空timer
timer = setTimeout(_ => {
timer = null;
}, delay);
} else { // delay時間后觸發(fā)操作
timer = setTimeout(_ => {
fn.apply(ctx, args);
}, delay);
}
};
};
防抖動立即觸發(fā)
debounce-immediate.png
防抖動
debounce.png
節(jié)流
var throttle = function (fn, delay, isImmediate) {
var timer = null;
// 默認立即觸發(fā)
isImmediate = typeof isImmediate === "undefined" ? true : isImmediate;
return function () {
var ctx = this, // 保存作用域
args = arguments; // 保存參數(shù)
if (!timer) { // timer為空時
if (isImmediate) fn.apply(ctx, args); // 立即觸發(fā)
timer = setTimeout(function () {
clearTimeout(timer);
timer = null;
if (!isImmediate) fn.apply(ctx, args); // delay時間后觸發(fā)操作
}, delay);
}
};
};
節(jié)流立即觸發(fā)
throttle-immediate.png
節(jié)流
throttle.png
總結(jié)
- 防抖動：將多個操作合并為一個操作（例如，鍵盤輸入關(guān)鍵字搜索內(nèi)容），在規(guī)定延時時間后觸發(fā)千贯，如果在定時器時間范圍內(nèi)觸發(fā)孕似，則會清楚定時器，重新計時
- 節(jié)流：在給定的延時時間后觸發(fā)一次操作表谊，在此時間范圍內(nèi)的操作均不觸發(fā)（例如钞护，圖片懶加載、向下無限滾動獲取新數(shù)據(jù)）
