函數節流和防抖的實現

函數防抖

何爲函數防抖

定義：在事件被觸發n秒後再執行回調,若是在這n秒內又被觸發,則從新計時;
如何理解這段定義，能夠用手機屏幕休眠來理解，若設置休眠時間爲一分鐘，若是在一分鐘以內咱們有去操做手機，則從新從一分鐘開始計算。
這個過程當中，事件可爲觸摸屏幕，而後事件被觸發後的一分鐘後屏幕休眠，可是在這一分鐘內若是又觸摸了屏幕，則會從新從一分鐘開始計算。

如何實現函數防抖

應用場景：函數防抖通常應用於搜索框，用函數防抖來實現收集數據發送請求
eg.

let input = document.querySelector('input')
let timeID = null // 設置控制定時器的句柄
input.onkeyup = () => {
  if (timeID) {
    clearTimeout(timeID) // 若是有在延遲時間內再次觸發，則清除定時器
  }
   timeID = setTimeout(() => {
    console.log(input.value,'獲取搜索框內容')
  }, 200);
}

何爲函數節流

定義：指連續觸發事件可是在 n 秒中只執行一次函數。
字面意思就是在一段週期內，事件被觸發多少次，它所指定的回調函數只執行一次
主要是用來避免一些頻繁操做

如何實現函數節流

eg.

let btn = document.querySelector('#btn')
let flag = true
btn.onclick = () => {
  if (flag) {
    console.log('發送請求')
    flag = false  
    setTimeout (()=>{
    flag = true 
  },2000) // 設定週期
 }
}