js/JavaScript防抖處理

1.定義

2.實作原理

• 實作方式：每次觸發事件時設定一個延遲調用方法，并且取消之前的延時調用方法
• 缺點：如果事件在規定的時間間隔内被不斷的觸發，則調用方法會被不斷的延遲

function debounce(func, ms = 1000) {
  let timer; // 建立一個标記用來存放定時器的傳回值
  return function (...args) {   
    // 每當觸發防抖事件時把前一個 setTimeout clear 掉
    if (timer) {   
      clearTimeout(timer)
    }
    // 然後又建立一個新的 setTimeout, 這樣就能保證interval 間隔内如果時間持續觸發，就不會執行 fn 函數 
    timer = setTimeout(() => { 
      func.apply(this, args)
    }, ms)
  }
} 
// 處理函數
const task = () => { console.log('run task') }; 
const debounceTask = debounce(task, 1000);

// 綁定觸發防抖事件
window.addEventListener('scroll', debounceTask)