防抖和節流的區別及應用場景

833字
4分鐘
2024-07-18
- 技術

在前端開發中，為了提升性能和用戶體驗，我們常常需要對頻繁觸發的事件進行控制。防抖（Debounce）和節流（Throttle）是兩種常用的技術手段。本文將詳細介紹防抖和節流的概念、區別及其在實際開發中的應用場景。

防抖（Debounce）

防抖是一種控制函數調用頻率的技術，當某個事件持續觸發時，防抖會延遲函數的執行，直到事件停止觸發一段時間後再執行函數。如果在延遲期間事件再次觸發，則重新計時。

示例代碼

1
function debounce(func, wait) {
2
  let timeout;
3
  return function (...args) {
4
    clearTimeout(timeout);
5
    timeout = setTimeout(() => {
6
      func.apply(this, args);
7
    }, wait);
8
  };
9
}
10

11
// 應用防抖
12
const handleResize = debounce(() => {
13
  console.log("Window resized");
14
}, 300);
15

16
window.addEventListener("resize", handleResize);

在上述代碼中，handleResize 函數只有在窗口大小調整停止 300 毫秒後才會被執行一次。

節流（Throttle）

節流也是一種控制函數調用頻率的技術，但與防抖不同的是，節流會保證在一定時間間隔內函數只執行一次，不管事件在此時間間隔內觸發了多少次。

示例代碼

1
function throttle(func, delay) {
2
  let lastCall = 0;
3
  return (...args) => {
4
    const now = new Date().getTime();
5
    if (now - lastCall < delay) {
6
      return;
7
    }
8
    lastCall = now;
9
    return func(...args);
10
  };
11
}
12

13
// 應用節流
14
const handleScroll = throttle(() => {
15
  console.log("Window scrolled");
16
}, 300);
17

18
window.addEventListener("scroll", handleScroll);

在上述代碼中，handleScroll 函數在窗口滾動時每隔 300 毫秒執行一次。

防抖和節流的區別

觸發方式：
- 防抖：在事件停止觸發一段時間後才執行函數。
- 節流：在一定時間間隔內只執行一次函數。
應用場景：
- 防抖：適用於需要在用戶停止輸入或操作後才進行處理的場景，如搜索框自動補全、表單驗證。
- 節流：適用於需要在一段時間內只執行一次的場景，如窗口滾動事件、按鈕防止多次點擊。