JS防抖與節流教學

在Javascript開發過程中，我們經常需要處理一些高頻事件，比如滾動、窗口縮放、鍵盤輸入等。如果這些事件的處理函數直接綁定到事件上，可能會導致瀏覽器的性能問題。為了優化性能和用戶體驗，我們通常會使用兩種技術：防抖（Debouncing）和節流（Throttling）。接下來，我們將深入了解它們的差異、使用時機和實現方法。

防抖 (Debouncing)

防抖技術指的是觸發事件後，在指定時間內只執行一次事件處理函數。如果在指定時間內再次觸發了事件，則重新計算等待時間。這樣可以確保事件處理函數在一系列快速的事件觸發中只被執行一次。

使用時機

防抖技術適用於那些觸發頻率高，但不需要立即響應每次觸發的場景。例如：

搜索框輸入（用戶停止輸入後再進行搜索）
窗口大小調整（調整結束後再計算布局）

範例

function debounce(func, wait) {
    let timeout;
    return function(...args) {
        const context = this;
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(context, args), wait);
    };
}

// 使用防抖
window.addEventListener('resize', debounce(function() {
    console.log('窗口大小調整完成');
}, 500));

節流 (Throttling)

節流技術指的是在指定時間內最多只執行一次事件處理函數，即使在這段時間內觸發了多次事件，事件處理函數也只會被執行一次。

使用時機

節流技術適用於那些需要實時控制事件處理頻率的場景。例如：

滾動事件處理（比如無限滾動的加載更多）
游戲中的按鍵響應
範例

function throttle(func, wait) {
    let lastTime = 0;
    return function(...args) {
        const now = new Date().getTime();
        if (now - lastTime > wait) {
            lastTime = now;
            func.apply(this, args);
        }
    };
}

// 使用節流
window.addEventListener('scroll', throttle(function() {
    console.log('滾動事件被觸發');
}, 1000));