防抖和節流

概念：老實說，第一次聽到這個詞的時候覺得真的太生動了，我想大家從字面上就能get到他的意思。比如說點選出滑鼠的時候不小心手抖了，一下子快速點了兩次，但如果函式本身只需要觸發一次，這樣就導致了不確定的結果，所以，防抖的作用是限制函式在一定時間內只能觸發一次，防止你」手抖「。當然這個手抖可能是無意的，也可能是網頁防止你惡意的行為。

常見的處理手法是閉包和定時器：

function debounce(fn,wait)
timer = settimeout(fn,wait);
}} 
function handle()
window.addeventlistener("resize",debounce(handle,1000));

當resize觸發時，閉包檢查定時器是否存在，存在的話把原定時器清除，然後設定新的定時器。

但從程式合理性去考慮，如果使用者不斷點選，這樣事件觸發就不斷延後，雖然應該沒有那麼無聊的人，但這樣的做法始終還是有他的不合理性。因此我做了以下的改動

1
function debounce(fn,wait),wait)10}
11} 12}
1314
function handle()
1718 window.addeventlistener("click",debounce(handle,1000))

這樣的話事件觸發就不會延後了，並且也起到了防抖的效果。

需要防抖的場景還有很多，比如resize，onscroll，click，input等。

概念：節流的作用不同於防抖，防抖的話是一定時間內觸發多次只執行一次，而節流是當短時間觸發多次時，把這幾次觸發間隔一定的時間，當觸發的函式需要操作dom和進行很大量的資料操作和計算，或者非同步請求時候，節流可以起到防止丟幀和卡頓的效果。

示例：

1
function throttle(fn,delay)
8// 工作時間，執行函式並且在間隔期內把狀態位設為無效
9valid = false
10settimeout(() => , delay)14}
15}16/* 請注意，節流函式並不止上面這種實現方案,
17例如可以完全不借助settimeout，可以把狀態位換成時間戳，然後利用時間戳差值是否大於指定間隔時間來做判定。
18也可以直接將settimeout的返回的標記當做判斷條件-判斷當前定時器是否存在，如果存在表示還在冷卻，並且在執行fn之後消除定時器表示啟用，原理都一樣
19*/
2021
function showtop () 
25 window.onscroll = throttle(showtop,1000)

參考文章：

防抖和節流

防抖和節流 什麼是防抖和節流

防抖和節流

防抖和節流

相關推薦

防抖和節流什麼是防抖和節流