函數節流和函數防抖，兩者都是優化高頻率執行js代碼的一種手段。
大家大概都知道舊款電視機的工作原理，就是一行行得掃描出色彩到屏幕上，然后組成一張張圖片。由於肉眼只能分辨出一定頻率的變化，當高頻率的掃描，人類是感覺不出來的。反而形成一種視覺效果，就是一張圖。就像高速旋轉的風扇，你看不到扇葉，只看到了一個圓一樣。 同理，可以類推到js代碼。在一定時間內，代碼執行的次數不一定要非常多。達到一定頻率就足夠了。因為跑得越多，帶來的效果也是一樣。倒不如，把js代碼的執行次數控制在合理的范圍。既能節省瀏覽器CPU資源，又能讓頁面瀏覽更加順暢，不會因為js的執行而發生卡頓。這就是函數節流和函數防抖要做的事。
函數節流是指一定時間內js方法只跑一次。比如人的眨眼睛，就是一定時間內眨一次。
函數防抖是指頻繁觸發的情況下，只有足夠的空閑時間，才執行代碼一次。比如生活中的坐公交，就是一定時間內，如果有人陸續刷卡上車，司機就不會開車。只有別人沒刷卡了，公司才開車。
函數防抖
函數防抖的應用場景，最常見的就是用戶注冊時候的手機號碼驗證和郵箱驗證了。只有等用戶輸入完畢后，前端才需要檢查格式是否正確，如果不正確，再彈出提示語。以下還是以頁面元素滾動監聽的例子，來進行解析：
// 函數防抖 var timer = false; document.getElementById("debounce").onscroll = function(){ clearTimeout(timer); // 清除未執行的代碼，重置回初始化狀態 timer = setTimeout(function(){ console.log("函數防抖"); }, 300); };
函數防抖的要點，也是需要一個setTimeout來輔助實現。延遲執行需要跑的代碼。 如果方法多次觸發，則把上次記錄的延遲執行代碼用clearTimeout清掉，重新開始。 如果計時完畢，沒有方法進來訪問觸發，則執行代碼。
這個方法的作用是監聽ID為debounce元素的滾動事件 進入滾動事件方法體的時候，做的第一件事就是清除上次未執行的setTimeout。而setTimeout的引用id由變量timer記錄。 clearTimeout方法，允許傳入無效的值。所以這里直接執行clearTimeout即可。 然后，將需要執行的代碼放入setTimeout中，再返回setTimeout引用給timer緩存。 如果倒計時300ms以后，還沒有新的方法觸發滾動事件，則執行setTimeout中的代碼。
函數防抖的實現重點，就是巧用setTimeout做緩存池，而且可以輕易地清除待執行的代碼。 其實，用隊列的方式也可以做到這種效果。這里就不深入了。
這是我寫的一個測試demo，把鼠標移動到模塊上方，滾動滾輪，即可在控制台查看輸出效果。
demo地址：https://wall-wxk.github.io/blogDemo/2017/02/15/throttleAndDebounce.html
轉自：https://cloud.tencent.com/developer/article/1494497
另一個例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>防抖函數</title> </head> <body> <button id="btn">點擊</button> <script> //500毫秒內多次觸發只會執行一次， function de(){ let timer; return function(){ if(timer) clearTimeout(timer);//如果500毫秒內又一次觸發，則會重新計算時間 timer = setTimeout(() => { console.log('dddd') }, 500) } } document.querySelector('#btn').addEventListener('click',de()) </script> </body> </html>
函數節流可以看上一次隨筆