防抖（Debounce）技術(shù)是一種優(yōu)化策略，用于限制函數(shù)在一定時間內(nèi)的調(diào)用頻率，避免短時間內(nèi)頻繁觸發(fā)導(dǎo)致的性能問題，防抖技術(shù)主要分為兩種類型：定時器防抖和立即執(zhí)行防抖。

定時器防抖

• 原理：在觸發(fā)事件后，設(shè)置一個定時器，當(dāng)定時器超時后才執(zhí)行函數(shù)，如果在定時器超時前再次觸發(fā)事件，則重新設(shè)置定時器。
• 實現(xiàn)示例：

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

• 使用場景：適用于搜索框輸入提示、窗口大小改變等場景，比如用戶在搜索框中輸入內(nèi)容時，只有用戶停止輸入一段時間后，才會觸發(fā)搜索請求。

立即執(zhí)行防抖

• 原理：在觸發(fā)事件時，立即執(zhí)行函數(shù)，但在接下來的一段時間內(nèi)，如果事件再次觸發(fā)，則取消上一次的執(zhí)行，重新開始計時。
• 實現(xiàn)示例：

  function debounce(func, delay) {
    let timer;
    return function() {
        const context = this;
        const args = arguments;
        if (timer) clearTimeout(timer);
        const callNow =!timer;
        timer = setTimeout(() => {
            timer = null;
        }, delay);
        if (callNow) func.apply(context, args);
    };
  }

• 使用場景：適用于一些需要立即反饋，但又要避免頻繁觸發(fā)的場景，比如按鈕點擊提交表單，在點擊按鈕后，立即執(zhí)行提交邏輯，但在一定時間內(nèi)如果再次點擊，則忽略此次點擊。