Javascript函數的防抖和節流

標籤：瀏覽器   else   瞭解   ons   公眾號   mouse   速度   公眾   點擊   

防抖

防抖防抖 防止手抖

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

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

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函數的防抖和節流