JavaScript 去抖動如何優化事件處理並防止過多的函數呼叫？

了解JavaScript 去抖動

在JavaScript 中，「去抖動」函數在最佳化事件處理和防止過度函數呼叫方面發揮著至關重要的作用。它的工作原理是延遲函數的執行，直到自上次呼叫以來經過特定時間。

提供的程式碼片段概述了此類函數的實現：

function debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this, args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};

至了解它是如何工作的，讓我們分析一下每個部分：

• 'immediate' flag: 此選用標誌決定函數是否應在延遲時間過去之前在第一次呼叫時立即執行。如果立即設為 true，則函數將在初始呼叫時運行，然後為後續呼叫套用延遲。
• 'timeout' 變數： 在內部用來儲存對待處理的參考逾時。
• '稍後'函數： 計畫在延遲期後運作。它清除逾時，如果“immediate”為 false，則執行去抖函數。
• 'callNow' 變數： 檢查是否設定了「immediate」標誌並且沒有超時正在運作。如果計算結果為 true，則表示函數應立即執行。

呼叫函數時，它首先為延遲執行分配正確的上下文和參數。

• 如果 'callNow' 為 true（立即模式），則函數將立即執行，覆蓋任何掛起的延遲。
• 如果'immediate' 為 false 或 'callNow' 為 false，設定逾時以在指定的延遲時間後執行函數。如果在逾時到期之前發生另一次調用，則會重置逾時。
• 延遲時間過後，'timeout' 變數被清除，如果 'immediate' 為 false，則執行函數。

這種去抖動技術通常用於事件處理場景，例如捲動、調整大小或輸入事件，以提高反應能力並防止不必要的或重複的函數呼叫。

以上是JavaScript 去抖動如何優化事件處理並防止過多的函數呼叫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！