突然被人問到節流和防抖的區別，一臉大寫的懵逼，一直以為他倆是乙個東西。那趕緊學習一下吧。
定義：多次觸發事件後，事件處理函式只執行一次，並且是在觸發操作結束時執行。
原理：對事件處理函式做延時執行，如果在設定的時間內再次觸發事件函式，清除定時器（cleartimeout），重新計時。
適用場景：乙個輸入框連續輸入，獲取使用者最終輸入結果
實現：
function debounce(fn, ms) , ms);
}}function changefn(e) ------$`);}
document.getelementbyid('ip').addeventlistener('keyup', debounce(changefn, 300), false);
原理：設定乙個flag，否—直接return不執行事件處理函式，是—立即設定flag為否，延時執行事件處理函式，同時這是flag為是
適用場景：滾輪滾動、視口大小改變，實時根據變化計算值，根據這個值改變頁面顯示。
實現：
function throttle(fn, ms)
//立即設定flag為false，保證ms時間內會return，不執行函式
canrun = false;
settimeout(() => , ms)
}}function resized(e) `);
}window.addeventlistener('resize', throttle(resized, 300), false);
節流是每隔指定時間後執行一次函式
js防抖和節流
在進行視窗的resize scroll，輸入框內容校驗等操作時，如果事件處理函式呼叫的頻率無限制，會加重瀏覽器的負擔，導致使用者體驗非常糟糕。此時我們可以採用debounce 防抖 和throttle 節流 的方式來減少呼叫頻率，同時又不影響實際效果。函式防抖 函式防抖 debounce 當持續觸發...
js 防抖和節流
很多 都會提供乙個按鈕 用於返回頂部。這個按鈕只會在滾動到距離頂部一定位置的時候才出現 監聽滾動事件，返回當前到頂部的距離 function showtop window.onscroll showtop 但是執行的時候存在乙個問題 函式預設執行頻率太高，按一次鍵盤的下方向鍵，函式就執行了9次！實際...
js防抖和節流
輸入框進行搜尋時，如果使用者停止輸入並且過了一定時間，才真正開始檢查輸入框的值，用來節約瀏覽器資源 還有配置動態rem也可以使用防抖函式 防抖 function shake fn,delay timer settimeout delay 處理函式 function handle 滾動事件 docum...