[Medium] 手寫節流 (throttle) 函式

2024年3月8日

💎 加入 E+ 成長計畫 如果你喜歡我們的內容,歡迎加入 E+,獲得更多深入的軟體前後端內容

題目描述

節流 (throttle) 指的是,在一段時間(t)內只會執行一次觸發事件的回調 (callback) 函式,若在這之中又有新事件觸發,則不執行此回調函式。

請實踐一個節流函式 throttle,此函式接收兩個參數,第一個參數是一個回調函式 fn,第二個參數是延遲時間 delay,此函式遵循以上描述的行為。

本題解答

以下是本題的解答,詳細解題思路可以在 E+ 成長計畫 看到。如果想練習更多題目,推薦可以到 GreatFrontEnd 上練習。

解法

function throttle(fn, delay = 500) {
  let timer = null;

  return function (...args) {
    if (timer) return;

    timer = setTimeout(() => {
      timer = null;
    }, delay);

    fn.apply(this, args);
  };
}
🧵 如果你想收到最即時的內容更新,可以在 FacebookInstagram 上追蹤我們