節流防抖詳解及代碼示例

一、什麼是節流和防抖？

在前端開發中，由於用戶的交互行為導致的頻繁觸發事件會導致瀏覽器的性能問題。我們可以通過使用節流和防抖來限制這種觸發，以提高瀏覽器的性能。

1. 節流

所謂節流，就是對一段時間內連續的事件進行忽略，只對首次或最後一次事件進行處理。

function throttle(fn, delay) {
  let lastTime = 0;
  return function() {
    const nowTime = new Date().getTime();
    if (nowTime - lastTime > delay) {
      fn();
      lastTime = nowTime;
    }
  }
}

const fn1 = () => console.log('Throttle');
window.addEventListener('scroll', throttle(fn1, 1000));

上述代碼中，我們定義了一個節流函數throttle，它接受兩個參數：要執行的函數fn和時間間隔delay，返回一個新函數。在新函數的內部，我們定義了lastTime變量，用來記錄上一次執行fn的時間，然後在每次執行時，判斷當前時間和上一次執行的時間差是否大於delay，如果是，則執行fn，並更新lastTime為當前時間。

2. 防抖

防抖是對連續的事件進行忽略，只對最後一次事件進行處理。

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

const fn2 = () => console.log('Debounce');
window.addEventListener('scroll', debounce(fn2, 1000));

防抖函數debounce也接受兩個參數：要執行的函數fn和時間間隔delay，返回一個新函數。在新函數的內部，我們定義了timer變量，用來記錄定時器的ID，然後在每次執行時，清除掉之前的定時器，並重新設置一個新的定時器。如果在delay的時間內，定時器的回調函數沒有被執行，那麼就說明已經過了delay時間，這時候我們就可以執行fn。

二、節流和防抖的使用場景

1. 節流

節流適用於需要高頻率觸發的事件，比如鼠標移動事件、窗口大小改變事件等。

function throttle(fn, delay) {
  let lastTime = 0;
  return function() {
    const nowTime = new Date().getTime();
    if (nowTime - lastTime > delay) {
      fn();
      lastTime = nowTime;
    }
  }
}

const fn1 = () => console.log('Throttle');
window.addEventListener('mousemove', throttle(fn1, 100));

在上述代碼中，我們可以看到，節流函數被用於監聽鼠標移動事件。假設我們沒有使用節流，那麼每次鼠標移動都會觸發事件，這樣會極大地影響瀏覽器的性能，使用節流後，鼠標移動事件在100毫秒內只會觸發一次，這樣就避免了頻繁觸發事件導致的性能問題。

2. 防抖

防抖適用於需要延遲處理的事件，比如搜索框輸入事件，我們希望用戶輸入後在一定時間內沒有進行下一次輸入操作，則開始發起搜索請求。

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

const fn3 = (value) => console.log(`Search: ${value}`);
const input = document.querySelector('input');
input.addEventListener('input', debounce(() => fn3(input.value), 500));

上述代碼中，我們監聽了input的輸入事件，並且使用了防抖函數。假設用戶在500毫秒內一直在輸入，那麼防抖函數的定時器會一直被重置，直到用戶在500毫秒內沒有進行輸入操作，定時器的回調函數才會被執行，從而發起搜索請求。

三、節流和防抖的優缺點

1. 節流

節流的優點在於可以控制在一定時間內只觸發一次事件，避免頻繁觸發事件導致的性能問題。同時，節流函數也比較簡單，容易理解和使用。

缺點在於，由於在一定時間內只觸發一次事件，所以在該時間內累計的事件會被忽略，可能會導致用戶操作的不連貫性。

2. 防抖

防抖的優點在於可以延遲處理事件，避免在用戶頻繁操作時頻繁觸發事件導致的性能問題。同時，防抖函數也可以控制輸入框等需要延遲處理的組件的行為，提升用戶體驗。

缺點在於，防抖函數在一段時間內只執行最後一次事件，而前面的事件都會被忽略，可能導致用戶操作的不連貫性。

四、小結

綜上所述，節流和防抖是前端開發中非常實用的工具，可以控制事件被觸發的頻率，從而避免瀏覽器的性能問題。節流適用於高頻率觸發的事件，而防抖適用於需要延遲處理的事件。使用節流和防抖可以提升用戶體驗，並且提高應用程序的響應速度。