函数节流与防抖动

函数节流与防抖动

一些函数事件会在短时间内触发很多次，如resize，scroll。在用户某些操作时，可能会引起导致一些严重的性能问题。解决的方法主要有：函数防抖动(Debouncing) 和/或 函数节流（Throttling）

函数去抖动（Debounce）

当事件发生时，我们不会立即激活回调。相反，我们等待一定的时间并检查相同的事件是否再次触发。如果是，我们重置定时器，并再次等待。如果在等待期间没有发生相同的事件，我们就立即激活回调。

// debounce函数用来包裹我们的事件
function debounce(fn, delay) {
// 持久化一个定时器 timer
let timer = null;
// 闭包函数可以访问 timer
return function() {
// 通过 'this' 和 'arguments'
// 获得函数的作用域和参数
let context = this;
let args = arguments;
// 如果事件被触发，清除 timer 并重新开始计时
clearTimeout(timer);
timer = setTimeout(function() {
fn.apply(context, args);
}, delay);
}
}

// 当用户滚动时函数会被调用
function foo() {
console.log('You are scrolling!');
}

// 在事件触发的两秒后，我们包裹在debounce中的函数才会被触发
let elem = document.getElementById('container');
elem.addEventListener('scroll', debounce(foo, 2000));

立即执行(Immediate)

Immediate是Debounce的精确版本。比起 Debounce 的 等待后续事件触发，然后再激活回调，Immediate 是 立即激活回调，然后等待后续事件在一定时间内触发。

就像Throttle的情况一样，我们需要一个状态变量来检查是否应该激活我们的回调。我们在Debounce不需要一个，因为timeoutID隐式管理这部分。

var delta = 1000;
var timeoutID = null;
var safe = true;
function log() {
console.log('foo');
}
function immediatedLog() {
if (safe) {
log();
safe = false;
}
clearTimeout(timeoutID);
timeoutID = setTimeout(function() {
safe = true;
}, delta);
};
window.onkeydown = immediatedLog;

函数节流（Throttle）

function throttle(fn, delta, context) {
var safe = true;
return function() {
var args = arguments;
if (safe) {
fn.call(context, args);
safe = false;
setTimeout(function() {
safe = true;
}, delta);
}
};
}

也还是抽象了点，还是举个栗子吧。

很简单的，页面滚动就输出1。

$(document).on("mousewheel DOMMouseScroll", function(e) {
if (!scrolling) {
if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
navigateUp();
} else {
navigateDown();
}
}
});

随意一滚

let timer = null;
var safe = true;
$(document).on("mousewheel DOMMouseScroll", function(e) {
clearTimeout(timer);
timer = setTimeout(function() {
console.log(1)
if (!scrolling) {
if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
navigateUp();
} else {
navigateDown();
}
}
}, 3000);
});

疯狂滚动，等我停下来的时候过3s才输出1

if (safe) {
console.log(1)
if (!scrolling) {
if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
navigateUp();
} else {
navigateDown();
}
}
safe = false;
setTimeout(function() {
safe = true;
}, 3000);
}

一直疯狂滚动，立刻输出1，然后过3s在输出1，过3秒在输出1