點擊上方藍字關注「小鄭搞碼事」，每天都能學到知識，搞懂一個問題！

什麼是JavaScript函數節流？相信有不少同學腦海里都沒概念，其實很簡單......

如果你沒聽說過"函數節流"，那下面這種需求你一定遇到過：就是當瀏覽器窗口改變的時候需要去改變頁面中一些元素的大小，相信看到這個需求的時候，大家都會立馬想到用window的resize事件。沒錯，下面我們一步一步來說。

一、實例展示：

為了實現上面那個功能，下面是我寫的一段JS代碼（為了說明問題，用的是測試代碼），是這樣的：

這段代碼很容易理解，因為是測試代碼，我寫的比較簡單，於是乎，我高高興興的開始測試代碼，效果是這樣的：

哎呀！如上圖所示，我稍微拖拽一下瀏覽器窗口，resizeWin函數就執行了幾十次，這完全不是我想要的效果呀，假如，resizeWin函數里有一個ajax請求，簡單的一個拖拽就發起了幾十次請求，嚴重時，將拖慢整個網頁，這必屬於BUG，這肯定是不行的。於是乎，我就開始尋找解決辦法，這個辦法就是函數節流。

二、函數節流：

上面那個問題，其實我只是希望在拖拽結束時觸發一次就行，拖拽過程中不需要觸發，所以我就將代碼更改了一下，更改後是這樣的：

如上圖代碼可知，節流的原理就是，利用定時器，讓函數執行延遲100毫秒，在100毫秒內如果有函數又被調用則刪除上一次調用，這次調用100毫秒後執行，如此往複。在來看一下更改後的效果：

好了，問題解決了，函數節流就是這麼一回事，該總結了。

三、寫在最後的總結：

這篇文章很短，主要是給大家講講函數節流，從上面來看，函數節流的原理挺簡單的：當觸發一個事件時，先setTimout讓這個事件延遲一會再執行，如果在這個時間間隔內又觸發了事件，那就clear掉原來的定時器，再setTimeout一個新的定時器延遲一會執行。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！