前言

防抖和節流是某次同事在做換頁功能，經前輩的建議才知道這個方法，不然只要一直按換頁，頁面就會一直跳。
原來看到一些換頁怪怪的網頁，就是沒做好防抖啊抓到。

防抖 debounce

目的

確保只在事件觸發結束後的一段時間(確定最後的結果後)，才執行事件處理函數。

用途

需要等使用者停止操作一段時間後，才進行處理的函數。除了避免短時間重複執行外，也可以維持畫面的秩序。例：鍵盤輸入、窗口調整大小、換頁。

效果

使用者(短時間內)連續觸發多次事件時，只執行最後一次。

問題解決思路

• 觸發後超過一定的時間才會執行；所以在預設的時間內，如果觸發超過一次，就取後面那次觸發的時間。
• 每次觸發事件時，要開啟定時器，確認過了一段時間已沒有再下一次的觸發，才執行事件處理函數。
• 每次觸發事件時，也清除上一次的定時器。

實現方法

在事件觸發時設置一個計時器，每當事件觸發時重置計時器。只有當計時器達到設定的等待時間後，才執行事件處理函數。

假設使用情境

同樣是很多報導的新聞頁面，但這次是用換頁顯示，一頁八篇。

實驗

註1：寫一個 cilckTimer 函式來假設連續點擊的狀況。

註2：有讓等待時間拉得比平常操作/等待時間長，便於判斷。

let timer 
const debounce = (waitSec) => {
	clearTimeout(timer)
    console.log('debounce函式，clearTimeout')
		timer = setTimeout(() => {
		  console.log('debounce函式，setTimeout')
		  console.log('turnpage')
		}, waitSec)
}

// 寫一個函式來假設連續點擊的狀況
// 有讓時間拉得比平常操作/等待時間長，便於判斷
let cilckTimer = (cilckNum) => {
    setTimeout(() => {
        console.log(`第${cilckNum}次點擊`)
        if(cilckNum < 4) cilckTimer (cilckNum + 1)
        debounce(4000)
    }, 2000)
}

debounce(4000)
cilckTimer (1)

>> debounce函式，clearTimeout
>> 第1次點擊
>> debounce函式，clearTimeout
>> 第2次點擊
>> debounce函式，clearTimeout
>> 第3次點擊
>> debounce函式，clearTimeout
>> 第4次點擊
>> debounce函式，clearTimeout
>> debounce函式，setTimeout
>> turnpage

*預設點擊四次後，再隔四秒鐘會執行turnpage *

function debounce(func, delay) {
  let timerId;
  return function (...args) {
    clearTimeout(timerId);
    timerId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// 使用防抖處理鍵盤輸入事件，延遲 500 毫秒執行
input.addEventListener('input', debounce(function() {
  console.log('Input event');
}, 500));

ChatGPT給的

結語

今天講防抖，明天講節流，它們是好兄弟(誰說的)。

今天就到這，如有說明不周或錯誤的地方，還請多留言討論(鞠躬)。

參考

setTimeout
https://developer.mozilla.org/en-US/docs/Web/API/setTimeout
防抖節流
https://www.readfog.com/a/1634896524109516800