前言
我們稱這些行為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;總結
以上就是這篇文章的全部內容了，在這篇文章中，我們已經探索了用作定時函數的最常見的技術。希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
新聞熱點
疑難解答
