防抖和節流原理分析


 工作中制作了

 

這樣一個頁面,遇到了防抖和節流的問題,還被批評了,夜里研究下:

 

debounce(防抖)

throttle(節流)

 

防抖 debounce 簡單來說就是防止抖動

當持續觸發事件時 debounce 會合並事件且不會去觸發事件,當一定時間內沒有觸發在這個事件時,才真正去觸發事件。

非立即執行版

比如本次工作任務中不停切換tab頁面時候就需要用防抖 點擊后不能立刻刷新,

 

立即執行版

立即執行版的意思是觸發事件后函數會立即執行,然后 n 秒內不觸發事件才能繼續執行函數的效果。

結合版

 

throttle(節流),當持續觸發事件時,保證隔間時間觸發一次事件

持續觸發事件時,throttle會合並一定時間內的事件,並在該時間結束時真正去觸發

 

 

 節流:用鎖好像也可以實現

 

自己在項目中的應用, 點擊上方標題,切換頁面的時候都是用的防抖

 

防抖:及時響應用戶的輸入,只是將多次請求合並為一次請求

節流:對請求進行有時間間隔的限制


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM