函式節流你應該知道的那點事，建議收藏！

這裡要給大家引入一個函式節流的概念，他的應用場景還是十分多的。下面小千就給大家分別從概念和案例分開介紹，喜歡的話不妨收藏起來。

什麼是節流？

幼兒園所有的小朋友每天都要做3件事：吃飯、睡覺、打豆豆。只有一個小朋友例外，他的名字叫豆豆。後來，有一位善良勇敢的小朋友站出來說：你們不能這樣打他了，這麼打下去，會把他打死的，那我們以後就只能吃飯睡覺了！！所以從現在開始，我們每隔72小時，只能打1次豆豆，於是大家都紛紛表示贊同並流出了感動的淚水。

豆豆捱打的頻率被降低了，這就叫節流。

列舉一個實際的應用場景

一般情況下，當網頁向下滑動的距離越來越長的時候，在右下角會出現一個回到頂部的按鈕。

它的實現非常的簡單

然而你很快就發現了這段程式的邏輯問題

那就是，scroll這種滾動事件的觸發頻率是非常高的，只要在頁面上稍微滾動一下就會連續觸發十幾甚至二十幾次事件，每一次我們都需要重新計算頁面滾動距離，做判斷，顯示按鈕等操作。

顯然我們對該事件的觸發頻率不需要那麼高，200ms一次似乎已經足夠了。

於是，我們開始動手寫程式碼。

函式節流（未最佳化版本）

如果你仔細的閱讀了上面的程式碼，依然不能理解節流原理，我還有張原理圖給你看

總結：

用節流的方式，可以保證在一段時間內，只有第一次執行是生效的，直到超過了設定的時間段，才有機會執行下一次，大大的降低了原有函式的執行頻率，顧名思義，函式節流。

回過頭來，我們再看程式碼

最後，參考函式防抖，再來做一點最佳化吧

關於函式節流的應用場景，給大家列舉一下，僅供參考

- DOM 元素的拖拽（mousemove）

- 射擊遊戲在單位時間只能發射一顆（mousedown/keydown）

- Canvas 模擬畫板功能（mousemove）

- 懶載入，在滾動過程中判斷是否需要載入圖片（scroll）

- 頁面滾動到底部載入更多（scroll）