抖動與節流

當我們頻繁觸發同乙個事件，如：改變視窗大小 & 上下滾動滾動條 & 反覆向輸入框中輸入內容，就會頻繁的向後台傳送請求。直到任務完成時，之前的請求都是多餘的，嚴重影響使用者體驗和伺服器的效能。這種問題就叫抖動

可以在一定時間內監聽是否再次輸入，如果沒有再次輸入則認為本次輸入完成，傳送請求，否則就是判定使用者仍在輸入，不傳送請求。

規定函式至少間隔多久執行

利用時間間隔，當事件觸發的時間間隔很短的時候，就認為使用者操作還處於未完成狀態，推遲事件處理程式的執行。

讓處理事件的方法執行頻率減少，從而減少對應的處理開銷。

規定函式在某時間段內最多執行一次

不管是函式節流還是函式防抖，減少的都是事件處理程式的呼叫頻率，而不是時間的呼叫頻率

何時使用函式防抖，何時使用函式節流？

當我們只需要處理最後一次觸發事件時，用函式防抖。（例如：視窗大小變化，並不需要計算中間變化的過程，只需要視窗大小改變完成後的值）

當事件觸發過於頻繁，我們需要限制事件處理程式的呼叫頻率時，用函式節流

防抖動與節流

針對一些會頻繁觸發的事件如scroll resize，如果正常繫結事件處理函式的話，有可能在很短的時間內多次連續觸發事件，十分影響效能。所以我們對於這種事件我們要進行防抖動或者節流的處理來優化效能。防抖動 將幾次操作合併為一此操作進行。原理是維護乙個計時器，規定在delay時間後觸發函式，但是在de...

防抖動與節流

針對一些會頻繁觸發的事件如scroll resize，如果正常繫結事件處理函式的話，有可能在很短的時間內多次連續觸發事件，十分影響效能。它的做法是限制下次函式呼叫之前必須等待的時間間隔。正確實現debouncing的方法是將若干個函式呼叫合成一次，並在給定時間過去之後僅被呼叫一次。123 4567 ...

前端的抖動與節流

首先 下面 原理 不斷地觸發事件，但是停下來後，只執行一次。即觸發n次function，但只執行最後的一次function。使用場景 滾動 滑鼠移動 window resize 防抖動事件 鍵盤事件keydown keyup 主體 var timer null function debounce f...