Javascript函數的防抖和節流

來源:互聯網
上載者:User

標籤:瀏覽器   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函數的防抖和節流

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

Tags Index: