前言

我們稱這些行為events(事件)，和響應callbacks(回調)。連續(xù)的事件流被稱為event stream（事件流）。這些行為發(fā)生的速度不是我們能手動控制的。但是我們可以控制何時和如何激活正確的響應。有一些技術為我們提供精確的控制。

Throttle

在現(xiàn)代瀏覽器中，幀速率為60fps是流暢性能的目標，給定我們16.7ms的時間預算用于響應一些事件所有需要的更新。這樣可以推斷，如果每秒發(fā)生n個事件并且回調執(zhí)行，需要t秒的時間，為了流暢運行，

1 / n >= t

如果t以毫秒為單位，

1000 / n >= t

如果你曾經(jīng)使用mousemove事件，你會知道產(chǎn)生mousemove事件的數(shù)量每秒可以超過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;

實現(xiàn)

Throttle 允許我們限制我們激活響應的數(shù)量。我們可以限制每秒回調的數(shù)量。反過來，也就是說在激活下一個回調之前要等待多少時間;

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來實現(xiàn)相同的結果。 但是，不是檢查時間差，而是檢查狀態(tài)變化。

第一次，我們可以安全地激活回調。一旦完成，只有在等待 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

這個術語-去抖動 來自電子學的領域，手動開關輸入的信號被發(fā)送到數(shù)字電路中。在電子學中，當你按一個物理按鈕一次，數(shù)字電路可能讀到多個按壓，因為按鈕的物理屬性（金屬觸點，彈簧，磨損件等）。

去抖動意味著采集到的所有這些波動的信號，并把它們當作一個。

例子

一個簡單的例子已經(jīng)存在于JS中：keydown vs keyup。假設您正在處理一個項目，并且需要輸入內容。但是你想要每次敲擊鍵盤得到一個字符。輸入時，如果長按一個鍵，keydown事件將連續(xù)被觸發(fā)，但是 keyup 事件只有在按鍵被釋放時才會觸發(fā)。

window.onkeyup = function() {
 console.log('onkeyup');
}
 
window.onkeydown = function() {
 console.log('onkeydown');
}

這種行為上的差異對于確定輸入是否已完成是有用的。在示例場景中，它是你將使用的keyup事件。在某種程度上，我們可以說keydown 是原始輸入，keyup 是去抖動輸入。

實現(xiàn)

當事件發(fā)生時，我們不會立即激活回調。相反，我們等待一定的時間并檢查相同的事件是否再次觸發(fā)。如果是，我們重置定時器，并再次等待。如果在等待期間沒有發(fā)生相同的事件，我們就立即激活回調。

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 的 等待后續(xù)事件觸發(fā)，然后再激活回調，Immediate 是 立即激活回調，然后等待后續(xù)事件在一定時間內觸發(fā)。

實現(xiàn)

就像Throttle的情況一樣，我們需要一個狀態(tài)變量來檢查是否應該激活我們的回調。我們在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;

總結

以上就是這篇文章的全部內容了，在這篇文章中，我們已經(jīng)探索了用作定時函數(shù)的最常見的技術。希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。

最新評論