另一個流行的前端面試問題。它測試受訪者對 JS、性能和 FE 系統設計的知識。
這是前端面試問題系列的第二個問題。如果您希望提高準備程度或保持最新狀態，請考慮註冊 FrontendCamp。
去抖和節流的工作原理相同 - 延遲東西 - 但仍然有非常不同的方法和用例。
這兩個概念對於開發高效能應用程式都很有用。 您每天造訪的幾乎所有網站都以某種方式使用去抖和節流。
去抖
去抖動的一個眾所周知的用例是預先輸入（或自動完成）。
假設您正在為一個擁有數千種產品的電子商務網站建立搜尋功能。當使用者嘗試搜尋某些內容時，您的應用程式將進行 API 呼叫以取得與使用者的查詢字串相符的所有產品。
const handleKeyDown = async (e) => {
const { value } = e.target;
const result = await search(value);
// set the result to a state and then render on UI
}
<Input onKeyDown={handleKeyDown} />
登入後複製
這種方法看起來不錯，但有一些問題：
- 您正在對每個按鍵事件進行 API 呼叫。如果使用者鍵入 15 個字符，則單一使用者會呼叫 15 次 API。這永遠無法擴展。
- 當這 15 個 API 呼叫的結果到達時，您只需要最後一個。之前 14 次調用的結果將被丟棄。它會消耗大量用戶的頻寬，慢速網路上的用戶會看到明顯的延遲。
- 在 UI 上，這 15 個 API 呼叫將觸發重新渲染。它會使組件變得滯後。
解決這些問題的方法是去抖動。
基本想法是等到使用者停止輸入。我們將延遲 API 呼叫。
const debounce = (fn, delay) => {
let timerId;
return function(...args) {
const context = this;
if (timerId) {
clearTimeout(timerId);
};
timerId = setTimeout(() => fn.call(context, ...args), delay);
}
}
const handleKeyDown = async (e) => {
const { value } = e.target;
const result = await search(value);
// set the result to a state and then render on UI
}
<Input onKeyDown={debounce(handleKeyDown, 500)} />
登入後複製
我們擴展了現有程式碼以利用去抖動。
去抖動函數是通用實用函數，它接受兩個參數：
-
fn：應該延遲的函數呼叫。
-
延遲：以毫秒為單位的延遲。
在函數內部，我們使用 setTimeout 來延遲實際的函數（fn）呼叫。如果在計時器耗盡之前再次呼叫 fn，計時器將重設。
透過我們更新的實現，即使使用者輸入 15 個字符，我們只會進行 1 次 API 呼叫（假設每次按鍵的時間少於 500 毫秒）。這解決了我們開始建立此功能時遇到的所有問題。
在生產程式碼庫中，您不必編寫自己的去抖動實用函數。您的公司很可能已經使用了像 lodash 這樣具有這些方法的 JS 實用程式庫。
節流
嗯，去抖動對於效能來說非常有用，但在某些情況下，我們不想在收到更改通知之前等待 x 秒。
想像一下您正在建立一個協作工作空間，例如 Google Docs 或 Figma。關鍵功能之一是用戶應該即時了解其他用戶所做的更改。
到目前為止我們只知道兩種方法：
- Noob 方法：每當使用者移動滑鼠指標或鍵入內容時，都會進行 API 呼叫。你已經知道事情會變得多糟。
- 去抖動方法：它確實解決了效能方面的問題，但從使用者體驗的角度來看，它很糟糕。您的同事可能會寫一個 300 字的段落，但您最終只會收到一次通知。還算實時嗎？
這就是節流的用武之地。它位於上述兩種方法的中間。基本想法是 - 定期通知 - 不是在最後也不是在每次按鍵時通知，而是定期通知。
const throttle = (fn, time) => {
let lastCalledAt = 0;
return function(...args) {
const context = this;
const now = Date.now();
const remainingTime = time - (now - lastCalledAt);
if (remainingTime <= 0) {
fn.call(context, ...args);
lastCalledAt = now;
}
}
}
const handleKeyDown = async (e) => {
const { value } = e.target;
// save it DB and also notify other peers
await save(value);
}
<Editor onKeyDown={throttle(handleKeyDown, 1000)} />
登入後複製
我們修改了現有程式碼以利用節流功能。它需要兩個參數：
-
fn：實際的節流函數。
-
time：允許執行該函數的時間間隔。
實作非常簡單。我們將函數上次呼叫的時間儲存在lastCalledAt中。下次，當進行函數呼叫時，我們檢查時間是否已經過去，然後才執行 fn。
我們已經快到了，但是這個實作有一個錯誤。如果最後一次使用某些資料的函數調用是在時間間隔內進行的，並且此後沒有進行任何調用，該怎麼辦？根據我們目前的實現，我們將丟失一些數據。
為了解決這個問題，我們將參數儲存在另一個變數中，並啟動一個逾時，以便在沒有收到事件時稍後呼叫。
const throttle = (fn, time) => {
let lastCalledAt = 0;
let lastArgs = null;
let timeoutId = null;
return function(...args) {
const context = this;
const now = Date.now();
const remainingTime = time - (now - lastCalledAt);
if (remainingTime <= 0) {
// call immediately
fn.call(context, ...args);
lastCalledAt = now;
if (timeoutId) {
clearTimeout(timeoutId);
timeoutId = null;
}
} else {
// call later if no event is received
lastArgs = args;
if (!timeoutId) {
timeoutId = setTimeout(() => {
fn.call(context, ...lastArgs);
lastCalledAt = Date.now();
lastArgs = null;
timeoutId = null;
}, remainingTime);
}
}
}
}
登入後複製
此更新的實作可確保我們不會錯過任何資料。
Lodash 也提供了節流實用功能。
概括
- 去抖動和節流是效能最佳化技術。
- 這兩者的工作原理相似 - 延遲事情。
- Debounce 在收到最後一個事件後等待 t，而 Throttling 在 t 時間內定期執行 fn。
- 去抖動用於搜尋功能，節流用於即時應用程式（不限於這些）。
資源
前端營
洛達什
以上是去抖和節流的詳細內容。更多資訊請關注PHP中文網其他相關文章！
