函式節流和函式防抖，兩者都是優化高頻率執行js**的一種手段。
大家大概都知道舊款電視機的工作原理，就是一行行得掃瞄出色彩到螢幕上，然後組成一張張。由於肉眼只能分辨出一定頻率的變化，當高頻率的掃瞄，人類是感覺不出來的。反而形成一種視覺效果，就是一張圖。就像高速旋轉的風扇，你看不到扇葉，只看到了乙個圓一樣。 同理，可以類推到js**。在一定時間內，**執行的次數不一定要非常多。達到一定頻率就足夠了。因為跑得越多，帶來的效果也是一樣。倒不如，把js**的執行次數控制在合理的範圍。既能節省瀏覽器cpu資源，又能讓頁面瀏覽更加順暢，不會因為js的執行而發生卡頓。這就是函式節流和函式防抖要做的事。
函式節流是指一定時間內js方法只跑一次。比如人的眨眼睛，就是一定時間內眨一次。
函式防抖是指頻繁觸發的情況下，只有足夠的空閒時間，才執行**一次。比如生活中的坐公交，就是一定時間內，如果有人陸續刷卡上車，司機就不會開車。只有別人沒刷卡了，公司才開車。
函式防抖
函式防抖的應用場景，最常見的就是使用者註冊時候的手機號碼驗證和郵箱驗證了。只有等使用者輸入完畢後，前端才需要檢查格式是否正確，如果不正確，再彈出提示語。以下還是以頁面元素滾動監聽的例子，來進行解析：
//函式防抖
var timer = false
;document.getelementbyid(
"debounce
").onscroll =function(),
300);
};
函式防抖的要點，也是需要乙個settimeout來輔助實現。延遲執行需要跑的**。 如果方法多次觸發，則把上次記錄的延遲執行**用cleartimeout清掉，重新開始。 如果計時完畢，沒有方法進來訪問觸發，則執行**。
這個方法的作用是監聽id為debounce元素的滾動事件 進入滾動事件方法體的時候，做的第一件事就是清除上次未執行的settimeout。而settimeout的引用id由變數timer記錄。cleartimeout方法，允許傳入無效的值。所以這裡直接執行cleartimeout即可。 然後，將需要執行的**放入settimeout中，再返回settimeout引用給timer快取。 如果倒計時300ms以後，還沒有新的方法觸發滾動事件，則執行settimeout中的**。
函式防抖的實現重點，就是巧用settimeout做快取池，而且可以輕易地清除待執行的**。 其實，用佇列的方式也可以做到這種效果。這裡就不深入了。
這是我寫的乙個測試demo，把滑鼠移動到模組上方，滾動滾輪，即可在控制台檢視輸出效果。
demo位址：
**：另乙個例子：
"en">"
btn">點選
函式節流可以看上一次隨筆
函式防抖與函式節流
函式防抖 debounce 當呼叫動作過n毫秒後，才會執行該動作，若在這n毫秒內又呼叫此動作則將重新計算執行時間 函式節流 throttle 預先設定乙個執行週期，當呼叫動作的時刻大於等於執行週期則執行該動作，然後進入下乙個新週期 函式節流 throttle 與函式防抖 debounce 都是為了限...
函式節流與函式防抖
這裡以判斷頁面是否滾動到底部為例，普通的做法就是監聽window物件的scroll事件，然後再函式體中寫入判斷是否滾動到底部的邏輯 這樣做的乙個缺點就是比較消耗效能，因為當在滾動的時候，瀏覽器會無時不刻地在計算判斷是否滾動到底部的邏輯，而在實際的場景中是不需要這麼做的，在實際場景中可能是這樣的 在滾...
函式防抖與函式節流
前言 有一些瀏覽器事件我們不希望它很頻繁的觸發，如調整視窗大小 onresize 監聽滾動條滾動 onscroll 如果這些監聽事件需要呼叫介面的話一秒內可能會呼叫上百次，這樣坑定是有問題的。函式防抖 debounce 如果有人進電梯 觸發事件 那電梯將在10秒鐘後出發 執行事件 這時如果又有人進電...