函數節流

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

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

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

 

1 2 3 4 5 6 7 8 9 10

var resizeTimer = 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}    實際調用函數 */ var throttle = function ( fn , delay , immediate , debounce ) {      var curr = + new Date ( ) , //當前時間          last_call = 0 ,          last_exec = 0 ,          timer = null ,          diff , //時間差          context , //上下文          args ,          exec = function ( ) {              last_exec = curr ;              fn . apply ( context , args ) ;          } ;      return function ( ) {          curr = + new Date ( ) ;          context = this ,          args = arguments ,          diff = curr - ( debounce ? last_call : last_exec ) - delay ;          clearTimeout ( timer ) ;            if ( debounce ) {              if ( immediate ) {                  timer = setTimeout ( exec , delay ) ;              } else if ( diff >= 0 ) {                  exec ( ) ;              }          } else {              if ( diff >= 0 ) {                  exec ( ) ;              } else if ( immediate ) {                  timer = setTimeout ( exec , - diff ) ;              }          }            last_call = curr ;      } } ;   /* * 空閒控制 返回函數連續調用時，空閒時間必須大於或等於 delay，fn 纔會執行 * @param fn {function}  要調用的函數 * @param delay   {number}    空閒時間 * @param immediate  {bool} 給 immediate參數傳遞false 綁定的函數先執行，而不是delay後後執行。 * @return {function}    實際調用函數 */ var debounce = function ( fn , delay , immediate ) {      return throttle ( fn , delay , immediate , true ) ; } ;

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

更多閱讀：