我們這里說的throttle就是函數節流的意思。再說的通俗一點就是函數調用的頻度控制器，是連續執行時間間隔控制。主要應用的場景比如：

• 鼠標移動，mousemove 事件
• DOM 元素動態定位，window對象的resize和scroll 事件

有人形象的把上面說的事件形象的比喻成機關槍的掃射，throttle就是機關槍的扳機，你不放扳機，它就一直掃射。我們開發時用的上面這些事件也是一樣，你不松開鼠標，它的事件就一直觸發。回到window resize和scroll事件的基本優化提到的優化：

1 2 3 4 5 6 7 8 9 10

varresizeTimer=null; $(window).on('resize',function(){ ????????if(resizeTimer){ ????????????clearTimeout(resizeTimer) ????????} ????????resizeTimer=setTimeout(function(){ ????????????console.log("window resize"); ????????},400); ????} );

setTimeout和clearTimeout其實就是一個簡單的?throttle，很多好的控制了resize事件的調用頻度。

---

?

debounce

debounce和throttle很像，debounce是空閑時間必須大于或等于 一定值的時候，才會執行調用方法。debounce是空閑時間的間隔控制。比如我們做autocomplete，這時需要我們很好的控制輸入文字時調用方法時間間隔。一般時第一個輸入的字符馬上開始調用，根據一定的時間間隔重復調用執行的方法。對于變態的輸入，比如按住某一個建不放的時候特別有用。

debounce主要應用的場景比如：

• 文本輸入keydown 事件，keyup 事件，例如做autocomplete

這類網上的方法有很多，比如Underscore.js就對throttle和debounce進行封裝。jQuery也有一個throttle和debounce的插件：jQuery throttle / debounce，所有的原理時一樣的，實現的也是同樣的功能。再奉上一個自己一直再用的throttle和debounce控制函數：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54

/* * 頻率控制 返回函數連續調用時，fn 執行頻率限定為每多少時間執行一次 * @param fn {function}??需要調用的函數 * @param delay??{number}????延遲時間，單位毫秒 * @param immediate??{bool} 給 immediate參數傳遞false 綁定的函數先執行，而不是delay后后執行。 * @return {function}????實際調用函數 */ varthrottle=function(fn,delay,immediate,debounce){ ????varcurr=+newDate(),//當前時間 ????????last_call=0, ????????last_exec=0, ????????timer=null, ????????diff,//時間差 ????????context,//上下文 ????????args, ????????exec=function(){ ????????????last_exec=curr; ????????????fn.apply(context,args); ????????}; ????returnfunction(){ ????????curr=+newDate(); ????????context=this, ????????args=arguments, ????????diff=curr-(debounce?last_call:last_exec)-delay; ????????clearTimeout(timer); ????????if(debounce){ ????????????if(immediate){ ????????????????timer=setTimeout(exec,delay); ????????????}elseif(diff>=0){ ????????????????exec(); ????????????} ????????}else{ ????????????if(diff>=0){ ????????????????exec(); ????????????}elseif(immediate){ ????????????????timer=setTimeout(exec,-diff); ????????????} ????????} ????????last_call=curr; ????} }; /* * 空閑控制 返回函數連續調用時，空閑時間必須大于或等于 delay，fn 才會執行 * @param fn {function}??要調用的函數 * @param delay?? {number}????空閑時間 * @param immediate??{bool} 給 immediate參數傳遞false 綁定的函數先執行，而不是delay后后執行。 * @return {function}????實際調用函數 */ vardebounce=function(fn,delay,immediate){ ????returnthrottle(fn,delay,immediate,true); };

demo：http://www.css88.com/demo/throttle_debounce/

更多閱讀：

轉載于:https://www.cnblogs.com/rubyxie/p/3511026.html

總結

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

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