? ? 我們知道，js有些事件例如resize，mousemove等是會不間斷觸發的，例如我們簡單的一個scroll事件：? ?

function scrollFn(){console.log(1) } window.onscroll=scrollFn

? ?

? ? 我們需要在滾動的時候去做一些事情，如上圖可見，我們只是簡單的console，在一次滾動過程中函數即執行了將近20次，如果這個函數有更為復雜的方法，比如操作dom或者其他交互，會嚴重影響性能。為了避免這個問題，我們一般會使用定時器來對函數進行節流。

? ?函數節流的基本思想是設置一個定時器，在指定時間間隔內運行代碼時清楚上一次的定時器，并設置另一個定時器，知道函數請求停止并超過時間間隔才會執行。

? ?在javascript高級程序設計中，定義了一個方法，如下：??

function throttle(method,context){clearTimeout(method.tId);method.tId=setTimeout(function(){method.call(context)},300) }

? throttle函數接收兩個參數，即要執行的函數及執行環境，如果執行環境未定義，默認則為windows。在這個函數中，會在第一次執行時為method頂一個定時器屬性，在指定時間間隔（300）內再次執行時會清楚上一次定義的定時器并創建新定時器知道停止。

function scrollFn(){console.log(1) } function throttle(method,context){clearTimeout(method.tId);method.tId=setTimeout(function(){method.call(context)},300) } window.onscroll=function(){throttle(scrollFn) }

? ? ? ?網上還有一種解決方案：

function throttle(method,delay){var timer=null;return function(){var context=this, args=arguments;clearTimeout(timer);timer=setTimeout(function(){method.apply(context,args);},delay);} }

?

?

? ? ? ?調用結果和第一種結果相同，都能有效的阻止函數重復調用，不同的是，第一種將定時器設置為函數的一個屬性，而第二種方案通過閉包來實現。首先在函數內定義一個變量timer，然后返回一個函數，我們知道由于在返回函數中包含對timer的引用，因此timer并不會立即被清除。（我們也可以將timer定義為全局變量）。

? ? ? ?以上兩種方案存在一個問題，即如果事件一直觸發，那么函數將永遠不會被執行，這在某些時候并不符合我們的需求，可能我們只是想在規定時間內減少函數執行次數，所以對以上函數做如下改進：

?

function scrollFn(){console.log(1) } function throttle(method,delay,duration){var timer=null;var begin=new Date(); return function(){ var context=this, args=arguments;var current=new Date(); clearTimeout(timer);if(current-begin>=duration){method.apply(context,args);begin=current;}else{timer=setTimeout(function(){method.apply(context,args);},delay);}} } window.onscroll=throttle(scrollFn,100,500)

?

?

?

? ? ? 我們在初始的時候定義一個begin開始時間，當時間間隔超過duration時，則執行一次函數，這樣我們做到了不重復調用，又能保證500秒執行一次。

?

參考：http://www.cnblogs.com/dolphinX/p/3403821.html

轉載于:https://www.cnblogs.com/mopagunda/p/5323080.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的js函数节流的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。