前言
我們稱這些行為events(事件)，和響應callbacks(回調)。連續的事件流被稱為event stream（事件流）。這些行為發生的速度不是我們能手動控制的。但是我們可以控制何時和如何激活正確的響應。有一些技術為我們提供精確的控制。
Throttle
在現代浏覽器中，幀速率為60fps是流暢性能的目標，給定我們16.7ms的時間預算用於響應一些事件所有需要的更新。這樣可以推斷，如果每秒發生n個事件並且回調執行，需要t秒的時間，為了流暢運行，
1 / n >= t
如果t以毫秒為單位，
1000 / n >= t
如果你曾經使用mousemove事件，你會知道產生mousemove事件的數量每秒可以超過60次。如果我們的回調需要超過16.7ms，那就開始凌亂了。
var then = 0;
function log() {
var now = Date.now();
if (1000 / (now - then) > 60) {
console.log('It\'s over 9000!!!');
}
then = now;
}
window.onmousemove = log;
實現
Throttle 允許我們限制我們激活響應的數量。我們可以限制每秒回調的數量。反過來，也就是說在激活下一個回調之前要等待多少時間;
var delta = 1000;
var then = 0;
function log() {
console.log('foo');
}
function throttledLog() {
var now = Date.now();
if (now - then >= delta) {
log();
then = now;
}
};
window.onmousemove = throttledLog;
我們可以用 fps替換delta，並推斷出不同的代碼。
var fps = 60;
...
function throttledLog() {
var now = Date.now();
if (1000 / (now - then) < = fps) {
log();
then = now;
}
};
window.onmousemove = throttledLog;
我們也可以通過使用setTimeout來實現相同的結果。 但是，不是檢查時間差，而是檢查狀態變化。
第一次，我們可以安全地激活回調。一旦完成，只有在等待 delta 時間之後才能再次激活回調。
var delta = 1000;
var safe = true;
function log() {
console.log('foo');
}
function throttledLog() {
if (safe) {
log();
safe = false;
setTimeout(function() {
safe = true;
}, delta);
}
};
window.onmousemove = throttledLog;
Debounce
這個術語-去抖動 來自電子學的領域，手動開關輸入的信號被發送到數字電路中。在電子學中，當你按一個物理按鈕一次，數字電路可能讀到多個按壓，因為按鈕的物理屬性（金屬觸點，彈簧，磨損件等）。
去抖動意味著采集到的所有這些波動的信號，並把它們當作一個。
例子
一個簡單的例子已經存在於JS中：keydown vs keyup。假設您正在處理一個項目，並且需要輸入內容。但是你想要每次敲擊鍵盤得到一個字符。輸入時，如果長按一個鍵，keydown事件將連續被觸發，但是 keyup 事件只有在按鍵被釋放時才會觸發。
window.onkeyup = function() {
console.log('onkeyup');
}
window.onkeydown = function() {
console.log('onkeydown');
}
這種行為上的差異對於確定輸入是否已完成是有用的。在示例場景中，它是你將使用的keyup事件。在某種程度上，我們可以說keydown 是原始輸入，keyup 是去抖動輸入。
實現
當事件發生時，我們不會立即激活回調。相反，我們等待一定的時間並檢查相同的事件是否再次觸發。如果是，我們重置定時器，並再次等待。如果在等待期間沒有發生相同的事件，我們就立即激活回調。
var delta = 1000;
var timeoutID = null;
function log() {
console.log('foo');
}
function debouncedLog() {
clearTimeout(timeoutID); // reset timer
timeoutID = setTimeout(function() {
// wait for some time
// and check if event happens again
log();
}, delta);
};
window.onkeydown = debouncedLog;
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;
總結
以上就是這篇文章的全部內容了，在這篇文章中，我們已經探索了用作定時函數的最常見的技術。希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。