本文由小芭樂發表首先舉乙個例子：
模擬在輸入框輸入後做ajax查詢請求，沒有加入防抖和節流的效果，這裡附上完整可執行**：
1.沒有防抖的輸入：
沒有防抖和節流
缺點：浪費請求資源，可以加入防抖和節流來優化一下。
本文會分別介紹什麼是防抖和節流，它們的應用場景，和實現方式。防抖和節流都是為了解決短時間內大量觸發某函式而導致的效能問題，比如觸發頻率過高導致的響應速度跟不上觸發頻率，出現延遲，假死或卡頓的現象。但二者應對的業務需求不一樣，所以實現的原理也不一樣，下面具體來看看吧。
在事件被觸發n秒後再執行**函式，如果在這n秒內又被觸發，則重新計時。
(1) 使用者在輸入框中連續輸入一串字元後，只會在輸入完後去執行最後一次的查詢ajax請求，這樣可以有效減少請求次數，節約請求資源；
(2) window的resize、scroll事件，不斷地調整瀏覽器的視窗大小、或者滾動時會觸發對應事件，防抖讓其只觸發一次；
還是上述列子，這裡加入防抖來優化一下，完整**如下：
2.加入防抖後的輸入：
1.每一次事件被觸發，都會清除當前的 timer 然後重新設定超時呼叫，即重新計時。 這就會導致每一次高頻事件都會取消前一次的超時呼叫，導致事件處理程式不能被觸發；
2.只有當高頻事件停止，最後一次事件觸發的超時呼叫才能在delay時間後執行；
效果：加入防抖後，當持續在輸入框裡輸入時，並不會傳送請求，只有當在指定時間間隔內沒有再輸入時，才會傳送請求。如果先停止輸入，但是在指定間隔內又輸入，會重新觸發計時。
加入防抖
規定乙個單位時間，在這個單位時間內，只能有一次觸發事件的**函式執行，如果在同乙個單位時間內某事件被觸發多次，只有一次能生效。
(1)滑鼠連續不斷地觸發某事件（如點選），只在單位時間內只觸發一次；
(2)在頁面的無限載入場景下，需要使用者在滾動頁面時，每隔一段時間發一次 ajax 請求，而不是在使用者停下滾動頁面操作時才去請求資料；
(3)監聽滾動事件，比如是否滑到底部自動載入更多，用throttle來判斷；
還是上述列子，這裡加入節流來優化一下，完整**如下：
3.加入節流後的輸入：
加入節流
總結下防抖和節流的區別：
-- 效果：
函式防抖是某一段時間內只執行一次；而函式節流是間隔時間執行，不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函式。
-- 原理：
防抖是維護乙個計時器，規定在delay時間後觸發函式，但是在delay時間內再次觸發的話，都會清除當前的 timer 然後重新設定超時呼叫，即重新計時。這樣一來，只有最後一次操作能被觸發。
節流是通過判斷是否到達一定時間來觸發函式，若沒到規定時間則使用計時器延後，而下一次事件則會重新設定計時器。
如有問題，歡迎指正。
js防抖和節流
在進行視窗的resize scroll，輸入框內容校驗等操作時，如果事件處理函式呼叫的頻率無限制，會加重瀏覽器的負擔，導致使用者體驗非常糟糕。此時我們可以採用debounce 防抖 和throttle 節流 的方式來減少呼叫頻率，同時又不影響實際效果。函式防抖 函式防抖 debounce 當持續觸發...
js 防抖和節流
突然被人問到節流和防抖的區別，一臉大寫的懵逼，一直以為他倆是乙個東西。那趕緊學習一下吧。定義 多次觸發事件後，事件處理函式只執行一次，並且是在觸發操作結束時執行。原理 對事件處理函式做延時執行，如果在設定的時間內再次觸發事件函式，清除定時器 cleartimeout 重新計時。適用場景 乙個輸入框連...
js 防抖和節流
很多 都會提供乙個按鈕 用於返回頂部。這個按鈕只會在滾動到距離頂部一定位置的時候才出現 監聽滾動事件，返回當前到頂部的距離 function showtop window.onscroll showtop 但是執行的時候存在乙個問題 函式預設執行頻率太高，按一次鍵盤的下方向鍵，函式就執行了9次！實際...