防抖

• 2022 年 5 月 7 日
• 筆記
• js

函數防抖：短時間多次觸發同一事件，只執行 最開始 或 最後 一次操作。

function debounce(func, ms = 1000) {
  let timer;
  return function(...args) {
    console.log(args);
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      func.apply(this, args);
    }, ms);
  };
}
const task = () => {console.log('run task')};
const debounceTask = debounce(task, 1000);
window.addEventListener('click', debounceTask);  // click 可以換成 scroll

對 debounce 函數返回的匿名函數中 args 參數（這裡可忽略）的存在作出說明：
　　const debounceTask = debounce(task, 1000) 其實返回的是匿名函數。

點擊頁面觸發 window.addEventListener(‘click’, debounceTask) 事件，debounceTask 會執行。

這裡 debounceTask 沒有傳遞參數，打印 args 會看到有個事件對象，這裡的原因是因為：
　　在瀏覽器中，如果函數執行沒有傳遞參數，會默認有個瀏覽器事件對象作為參數，如監聽的是點擊 click 事件的話 args 就是 [PointerEvent]

將 click 換成 scroll，如果在函數不防抖，要執行很多次了~