JavaScript - 防震：初學者指南

你好，未來的 JavaScript 巫師們！今天，我們將要踏上一段令人興奮的旅程，探索防震（debouncing）的神秘世界。別擔心如果你從未聽過這個術語——在這個教學結束之前，你將會像專家一樣進行防震！

JavaScript - Debouncing

那麼什麼是防震呢？

想像你在一個擁擠的電梯裡，人們不斷地按著「關門」按鈕。如果電梯對每一次的按鈕都做出反應，那會是一片混亂！相反，電梯會等到人們停止按鈕一段時間之後才真正關上門。這就是程序設計中防震所做的。

防震是一種編程實踐，用來確保耗時任務不會那麼頻繁地觸發，從而使其更加高效。這就像是告訴你的代碼，「喂，等一下，看看還有沒有更多這樣的事件要來，然後你再行動！」

我們為什麼需要防震？

想像你正在為一個網站建立搜索功能。你希望用戶打字的時候就能顯示搜索結果，但你不想對每一次的鍵盤敲擊都向伺服器發送請求。這會很低效，並可能會使你的伺服器過載。這就是防震發揮作用的地方！

如何在 JavaScript 中實現防震

現在，讓我們挽起袖子，深入研究一些代碼！別擔心如果你一下子不能理解所有內容——我們會一步步來解釋。

function debounce(func, delay) {
let timeoutId;

return function(...args) {
clearTimeout(timeoutId);

timeoutId = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}

哇，這需要吸收很多資訊！讓我們分解一下：

我們定義了一個名為 debounce 的函數，它接受兩個參數：

func：我們要防震的函數
delay：在調用函數之前要等待的毫秒數

在 debounce 內部，我們聲明了一個名為 timeoutId 的變量。這將幫助我們跟蹤我們的計時器。
我們返回一個新函數，它實際上會進行防震：

它使用 clearTimeout(timeoutId) 清除任何現有的計時器。
它使用 setTimeout() 設置一個新的計時器。
在指定的延遲時間之後，它會調用我們原始的函數，並傳遞任何給定的參數。

現在，讓我們看看我們如何使用這個防震函數：

const expensiveOperation = () => {
console.log("執行耗時操作...");
};

const debouncedOperation = debounce(expensiveOperation, 1000);

// 模擬快速調用
for (let i = 0; i < 5; i++) {
debouncedOperation();
}

在這個例子中，即使我們快速調用了五次 debouncedOperation，expensiveOperation 也只會在1秒延遲之後運行一次。

防震的好處

性能提升：防震減少了函數被調用的次數，這可以顯著提高性能，特別是對於資源密集型操作。
更好的用戶體驗：它通過減少頻繁更新造成的卡頓，使你的應用程序感覺更加響應。
成本降低：對於涉及 API 調用的操作，防震可以減少請求的數量，從而節省 API 的成本。

防震在真實世界的應用案例

讓我們探討一些防震的實際應用：

1. 搜索輸入

const searchInput = document.getElementById('search-input');
const searchResults = document.getElementById('search-results');

const fetchSearchResults = (query) => {
// 模擬 API 調用
console.log(`為關鍵字：${query} 瀏覽搜索結果`);
};

const debouncedSearch = debounce(fetchSearchResults, 300);

searchInput.addEventListener('input', (e) => {
debouncedSearch(e.target.value);
});

在這個例子中，我們對搜索函數進行防震。它只會在用戶停止輸入300毫秒後才獲取結果，從而避免不必要的 API 調用。

2. 窗口調整大小事件

const handleResize = () => {
console.log('窗口調整大小！');
// 進行佈局調整
};

const debouncedResize = debounce(handleResize, 250);

window.addEventListener('resize', debouncedResize);

在這裡，我們對調整大小事件處理程序進行防震。這可以防止在窗口調整大小過程中過於頻繁地調用處理程序，這可能會導致性能問題。

3. 滚動事件

const handleScroll = () => {
console.log('滾動！');
// 根據滾動位置更新 UI
};

const debouncedScroll = debounce(handleScroll, 100);

window.addEventListener('scroll', debouncedScroll);

這個例子中，我們對滾動事件處理程序進行防震，確保在基於滾動位置更新 UI 時性能更平滑。

防震方法表

方法	描述	示例
`setTimeout`	設置一個計時器，當計時器到期時執行函數	`setTimeout(func, delay)`
`clearTimeout`	取消先前由 `setTimeout()` 建立的計時器	`clearTimeout(timeoutId)`
`apply`	使用給定的 `this` 值和作為數組提供的參數調用函數	`func.apply(this, args)`

好了，各位！你剛剛學會了 JavaScript 中的防震魔法。記住，就像學習任何新技能一樣，熟能生巧。嘗試在你的項目中實現防震，看看它如何提升性能。

誰知道「稍等一下」在編程中竟然如此強大？這就像老話所說的，「耐心是美德」——在防震的情況下，它也是性能提升器！

繼續編程，繼續學習，最重要的是，繼續在 JavaScript 中享受樂趣！

Credits: Image by storyset