在進行視窗的resize、scroll，輸入框內容校驗等操作時，如果事件處理函式呼叫的頻率無限制，會加重瀏覽器的負擔，導致使用者體驗非常糟糕。此時我們可以採用debounce（防抖）和throttle（節流）的方式來減少呼叫頻率，同時又不影響實際效果。
函式節流
使得一定時間內只觸發一次函式。原理是通過判斷是否到達一定時間來觸發函式。
應用:滾動瀏覽器滾動條的時候，更新頁面上的某些布局內容或者去呼叫後台的某介面查詢內容。
同樣的，如果不對函式呼叫的頻率加以限制的話，那麼可能我們滾動一次滾動條就會產生n次的呼叫了
函式防抖：
將幾次操作合併為一此操作進行。原理是維護乙個計時器，規定在delay時間後觸發函式，但是在delay時間內再次觸發的話，就會取消之前的計時器而重新設定。這樣一來，只有最後一次操作能被觸發。
應用:
假設我們**有個搜尋框，使用者輸入文字我們會自動聯想匹配出一些結果供使用者選擇。
我們可能首先想到的做法就是監聽keypress事件，然後非同步去查詢結果。
這個方法本身是沒錯的，但是如果使用者快速的輸入了一連串的字元，假設是10個字元，那麼就會在瞬間觸發了10次的請求，這無疑不是我們想要的。
我們想要的是使用者停止輸入的時候才去觸發查詢的請求，這時候函式防抖可以幫到我們。
區別： 函式節流不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函式，而函式防抖只是在最後一次事件後才觸發一次函式。 比如在頁面的無限載入場景下，我們需要使用者在滾動頁面時，每隔一段時間發一次 ajax 請求，而不是在使用者停下滾動頁面操作時才去請求資料。這樣的場景，就適合用節流技術來實現。
js防抖和節流
在進行視窗的resize scroll，輸入框內容校驗等操作時，如果事件處理函式呼叫的頻率無限制，會加重瀏覽器的負擔，導致使用者體驗非常糟糕。此時我們可以採用debounce 防抖 和throttle 節流 的方式來減少呼叫頻率，同時又不影響實際效果。函式防抖 函式防抖 debounce 當持續觸發...
js 防抖和節流
突然被人問到節流和防抖的區別，一臉大寫的懵逼，一直以為他倆是乙個東西。那趕緊學習一下吧。定義 多次觸發事件後，事件處理函式只執行一次，並且是在觸發操作結束時執行。原理 對事件處理函式做延時執行，如果在設定的時間內再次觸發事件函式，清除定時器 cleartimeout 重新計時。適用場景 乙個輸入框連...
js 防抖和節流
很多 都會提供乙個按鈕 用於返回頂部。這個按鈕只會在滾動到距離頂部一定位置的時候才出現 監聽滾動事件，返回當前到頂部的距離 function showtop window.onscroll showtop 但是執行的時候存在乙個問題 函式預設執行頻率太高，按一次鍵盤的下方向鍵，函式就執行了9次！實際...