在 JavaScript 中，高頻事件指的是頻繁觸發的事件，例如滾動、輸入、鼠標移動等。為了提高性能并避免因事件處理程序執行時間過長而導致的卡頓或瀏覽器無響應，我們可以使用防抖（debounce）和節流（throttle）兩種技術。

1. 防抖（debounce）： 防抖的基本思想是在事件被觸發后 n 秒內函數只執行一次。如果在這 n 秒內又被重新觸發，則重新計時。適用于如輸入框實時搜索、表單驗證等場景。

以下是一個簡單的防抖函數實現：

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

使用示例：

const handleScroll = debounce(function () {
  console.log('滾動事件觸發');
}, 200);

window.addEventListener('scroll', handleScroll);

2. 節流（throttle）： 節流的基本思想是在固定的時間間隔內執行一次事件處理函數。適用于如滾動加載、鼠標移動拖拽等場景。

以下是一個簡單的節流函數實現：

function throttle(func, interval) {
  let lastExecution = 0;
  return function () {
    const context = this;
    const args = arguments;
    const now = Date.now();
    if (now - lastExecution >= interval) {
      lastExecution = now;
      func.apply(context, args);
    }
  };
}

使用示例：

const handleScroll = throttle(function () {
  console.log('滾動事件觸發');
}, 200);

window.addEventListener('scroll', handleScroll);

總結：

• 防抖更適合于需要等待用戶停止操作后再執行的場景，如搜索建議。
• 節流更適合于需要按照固定頻率執行的場景，如滾動加載圖片。

根據實際需求選擇合適的策略來處理高頻事件，可以有效提升應用的性能和用戶體驗。