防抖

防抖防抖 防止手抖

就是在某段時間內觸發多次事件，只執行最後一次。

例如百度搜索聯想，只會聯想最後輸入的字符

function resizeEvent (content) {
  console.log(`window`+content)
}

let event = debounce(resizeEvent, 500)

function debounce(func, delay) {
  let timeOut = null
  return (args) => {
    if (timeOut !== null) {
      // 清除上一次定時器，重新計時
      clearTimeout(timeOut)
    }
    timeOut = setTimeout(() => {
      func(args)
    }, delay)
  }
}
// 調整瀏覽器窗口大小時，觸發事件
addEventListener(‘resize‘, ()=>{event(1)})

應用：

1.search聯想，在用戶不斷輸入值的時候，節約請求資源，確保聯想正確

2.window resize事件，防抖讓其只觸發一次

節流

在一段時間內觸發多次事件，函數在每一個間隔時間後執行一次。

例如 fps遊戲中 一直按著鼠標， 沖鋒槍子彈按照一定速度連發

function resizeEvent (content) {
  console.log(`window`+content)
}

let event = throttle(resizeEvent, 500)

function throttle(func, delay) {
  let last = null
  let deferTimer = null
  return (args) => {
    let now = new Date().getTime()
    if (last && now < last + delay) {
     // 未到間隔時間，清除定時器
      clearTimeout(deferTimer)
      deferTimer = setTimeout(()=> {
      // 重新新建定時器，等待間隔時間以後置位last，執行功能函數
        last = now
        func(args)
      }, delay)
    } else {
      // 第一次或者已超過間隔時間
      last = now
      func(args)
    }
  }
}
// 調整瀏覽器窗口大小時，觸發事件
addEventListener(‘resize‘, ()=>{event(1)})

應用：

1.鼠標不斷點擊觸發某功能，mousedown(單位時間內只觸發一次)

2.鼠標不斷移動觸發某功能，mousemove(單位時間內只觸發一次)

總結

防抖和節流

相同點都是為了解決短時間內大量觸發某函數而導致的性能問題。

不同點是根據不同的業務需求，實現的原理不同。

有問題可以一起探討，歡迎關註公眾號 小覃筆記

Javascript函數的防抖和節流