對防抖和節流的理解及其應用場景

在開發中，我們常常會去監聽滾動事件或者使用者輸入框驗證事件，如果事件處理沒有頻率限制，就會加重瀏覽器的負擔，影響使用者的體驗感，

因此，我們可以採取防抖（debounce）和節流（throttle）來處理，減少呼叫事件的頻率，達到較好的使用者體驗。

防抖（debounce）：

在事件被觸發n秒後再執行**，如果在這n秒內又被觸發，則重新計時，重新出發定時器。

防抖演示

防抖演示

防抖演示

防抖演示

防抖演示

防抖演示

防抖演示

防抖演示

防抖演示

function

debounce(fn, wait) 
timeout =settimeout(fn, wait);
}} 
//處理函式
我們可以發現，當連續觸發scroll事件，handle函式只會在1秒時間內執行一次，在如果繼續滾動執行，就會清除定時器，重新計時。相當於就是多次執行，只執行一次。
節流（throttle）：
規定在乙個單位時間內，只能觸發一次函式。如果這個單位時間內觸發多次函式，只有一次生效。
在節流函式內部使用開始時間prev、當前時間now和剩餘時間remain，當剩餘時間小於等於0意味著執行處理函式，這樣保證第一次就能立即執行函式並且每隔delay時間執行一次；
如果還沒到時間，就會在remaining之後觸發，保證最後一次觸發事件也能執行函式，如果在remaining時間內又觸發了滾動事件，那麼會取消當前的計數器並計算出新的remaing時間。
通過時間戳和定時器的方法，我們實現了第一次立即執行，最後一次也執行，規定時間間隔執行的效果。
總結，看完了防抖和節流的分別介紹，我們來看看他們的區別：
防抖是將多次執行變為只執行一次，節流是將多次執行變為每隔一段時間執行。
防抖(debounce)
search搜尋聯想，使用者在不斷輸入值時，用防抖來節約請求資源。
window觸發resize的時候，不斷的調整瀏覽器視窗大小會不斷的觸發這個事件，用防抖來讓其只觸發一次
節流(throttle)
滑鼠不斷點選觸發，mousedown(單位時間內只觸發一次)
監聽滾動事件，比如是否滑到底部自動載入更多，用throttle來判斷
本文**多出，為了讓自己看得明白一點。
 
對防抖和節流的理解及其應用場景
在開發中，我們常常會去監聽滾動事件或者使用者輸入框驗證事件，如果事件處理沒有頻率限制，就會加重瀏覽器的負擔，影響使用者的體驗感，因此，我們可以採取防抖 debounce 和節流 throttle 來處理，減少呼叫事件的頻率，達到較好的使用者體驗。防抖 debounce 在事件被觸發n秒後再執行 如果...
防抖和節流 應用場景及實現
概念 假定時間間隔為200ms，如果觸發事件後的200ms內再次觸發事件，則重新等待200ms，否則將成功執行指定函式。應用場景 資料查詢 監控使用者輸入 實現 function search t settimeout 2000 var test1 document.getelementbyid t...
js防抖與節流以及應用場景
在前端開發中會遇到一些頻繁的事件觸發，例如input，keyup，keydown，scroll，resize，mousemove等，這非常影響效能，所以我們需要控制它們觸發的頻率，方法就是防抖與節流。debounce function debounce func,wait wait 如果直接使用un...