前端學(xué)習(xí)15 防抖和節(jié)流

在前端開發(fā)中，處理頻繁的事件觸發(fā)是一項(xiàng)常見任務(wù)，例如窗口的 resize、頁面滾動(dòng)的 scroll 事件、用戶輸入的 keyup 或 keydown 事件等。如果不加以控制，這些事件會(huì)頻繁觸發(fā)，從而導(dǎo)致性能問題。因此，防抖（Debounce）和節(jié)流（Throttle）這兩種技術(shù)就顯得尤為重要。本文將詳細(xì)介紹防抖和節(jié)流的概念、區(qū)別、應(yīng)用場景以及實(shí)現(xiàn)方法。

1.防抖

1.1 防抖概念

防抖是一種延遲執(zhí)行的技術(shù)。它的原理是，當(dāng)事件被觸發(fā)時(shí)，延遲執(zhí)行事件處理函數(shù)，并且在延遲時(shí)間內(nèi)如果事件再次被觸發(fā)，則重新開始計(jì)時(shí)。只有當(dāng)事件在指定的時(shí)間內(nèi)沒有再次觸發(fā)，事件處理函數(shù)才會(huì)執(zhí)行。這樣可以避免某些高頻率的操作被頻繁觸發(fā)，從而提高性能。

1.2 適用場景

防抖主要適用于那些在用戶停止操作后才需要執(zhí)行的場景，例如：

搜索輸入框：用戶在輸入時(shí)，連續(xù)觸發(fā) keyup 事件，只有在輸入結(jié)束后才發(fā)送請(qǐng)求。窗口調(diào)整：用戶調(diào)整瀏覽器窗口大小時(shí)，頻繁觸發(fā) resize 事件。防抖可以確保調(diào)整結(jié)束后再執(zhí)行相應(yīng)操作。表單驗(yàn)證：用戶輸入表單數(shù)據(jù)時(shí)，可以用防抖來減少頻繁的驗(yàn)證請(qǐng)求。

1.3 防抖實(shí)現(xiàn)

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

debounce 函數(shù)接收兩個(gè)參數(shù)：func 是需要執(zhí)行的函數(shù)，wait 是延遲的時(shí)間。

每次觸發(fā)事件時(shí)，先清除上一次的 timeout，然后重新設(shè)置一個(gè)新的定時(shí)器。

只有在指定的 wait 時(shí)間內(nèi)沒有新的事件觸發(fā)時(shí)，func 才會(huì)被執(zhí)行。

假設(shè)我們在一個(gè)搜索輸入框中使用防抖來減少請(qǐng)求次數(shù)：

const searchInput = document.getElementById('search');
const handleSearch = debounce(function() {
    console.log('Sending request for:', this.value);
}, 500);
 
searchInput.addEventListener('keyup', handleSearch);

在這個(gè)例子中，只有在用戶停止輸入 500 毫秒后，handleSearch 才會(huì)被執(zhí)行，減少了不必要的請(qǐng)求。

2.節(jié)流（Throttle）

2.1 節(jié)流概念

節(jié)流是一種限制函數(shù)執(zhí)行頻率的技術(shù)。它的原理是，當(dāng)事件被頻繁觸發(fā)時(shí)，函數(shù)會(huì)按照一定的時(shí)間間隔執(zhí)行，而不是每次觸發(fā)事件都執(zhí)行。換句話說，在一個(gè)時(shí)間段內(nèi)，只會(huì)執(zhí)行一次事件處理函數(shù)。

2.2 適用場景

節(jié)流適用于需要間隔時(shí)間執(zhí)行的場景，例如：

頁面滾動(dòng)：用戶滾動(dòng)頁面時(shí)觸發(fā) scroll 事件，使用節(jié)流限制處理函數(shù)的執(zhí)行頻率。

按鈕點(diǎn)擊：防止用戶短時(shí)間內(nèi)多次點(diǎn)擊同一個(gè)按鈕，造成重復(fù)提交。

游戲動(dòng)畫：限制每秒渲染的幀數(shù)，以減少資源消耗。

2.3 節(jié)流實(shí)現(xiàn)

/**
 * 節(jié)流函數(shù)
 * @param {Function} func - 需要節(jié)流的函數(shù)
 * @param {number} wait - 時(shí)間間隔（毫秒），表示在這個(gè)時(shí)間間隔內(nèi)最多執(zhí)行一次函數(shù)
 * @returns {Function} - 返回一個(gè)節(jié)流后的函數(shù)
 */
function throttle(func, wait) {
    // 上一次執(zhí)行函數(shù)的時(shí)間戳，初始值為 0
    let lastTime = 0;
 
    // 返回一個(gè)閉包函數(shù)，作為節(jié)流后的函數(shù)
    return function (...args) {
        // 獲取當(dāng)前時(shí)間戳
        const now = Date.now();
 
        // 如果當(dāng)前時(shí)間與上一次執(zhí)行時(shí)間的差值大于等于 wait，則執(zhí)行函數(shù)
        if (now - lastTime >= wait) {
            // 更新上一次執(zhí)行函數(shù)的時(shí)間戳
            lastTime = now;
            // 調(diào)用原始函數(shù)，并傳入?yún)?shù)
            func.apply(this, args);
        }
    };
}

下面是一個(gè)使用節(jié)流限制 scroll 事件處理頻率的例子：

// 原始的滾動(dòng)事件處理函數(shù)
function handleScroll() {
    console.log('Scroll event triggered');
}
 
// 使用節(jié)流函數(shù)包裝 handleScroll
const throttledScrollHandler = throttle(handleScroll, 200);
 
// 監(jiān)聽滾動(dòng)事件，并使用節(jié)流后的函數(shù)
window.addEventListener('scroll', throttledScrollHandler);

在這個(gè)例子中，handleScroll 函數(shù)會(huì)在每次滾動(dòng)時(shí)執(zhí)行，但每隔一段時(shí)間只會(huì)執(zhí)行一次，即使 scroll 事件在這段時(shí)間內(nèi)被頻繁觸發(fā)。

3.綜合應(yīng)用

有時(shí)，我們需要在同一個(gè)項(xiàng)目中同時(shí)使用防抖和節(jié)流。例如，在一個(gè)輸入框中進(jìn)行搜索聯(lián)想提示時(shí)，我們可以用節(jié)流來控制 API 請(qǐng)求的頻率，用防抖來控制顯示搜索結(jié)果的時(shí)間。

const searchInput = document.getElementById('search');
 
// 使用防抖來控制輸入事件
const handleSearch = debounce(function() {
    // 使用節(jié)流來控制請(qǐng)求頻率
    throttleSearch();
}, 300);
 
// 使用節(jié)流來控制請(qǐng)求頻率
const throttleSearch = throttle(function() {
    console.log('Fetching search results for:', searchInput.value);
}, 1000);
 
searchInput.addEventListener('keyup', handleSearch);

在這個(gè)示例中，防抖函數(shù)用于減少輸入事件的頻率，只有在用戶停止輸入 300 毫秒后才會(huì)觸發(fā) throttleSearch。而 throttleSearch 函數(shù)會(huì)使用節(jié)流來限制請(qǐng)求頻率，確保在 1000 毫秒內(nèi)只發(fā)起一次請(qǐng)求。

4.總結(jié)

防抖和節(jié)流是前端優(yōu)化中常用的技術(shù)，合理使用可以顯著提升用戶體驗(yàn)和系統(tǒng)性能。兩者雖然用途不同，但都能有效地減少高頻事件觸發(fā)帶來的性能開銷。防抖適用于延遲執(zhí)行的場景，節(jié)流適用于限制執(zhí)行頻率的場景，開發(fā)者可以根據(jù)需求選擇合適的技術(shù)，甚至組合使用以達(dá)到最佳效果。

#前端學(xué)習(xí)#