javascript中的throttle和debounce

標籤：

throttle

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

1.滑鼠移動，mousemove 事件
2.DOM 元素動態定位，window對象的resize和scroll 事件

有人形象的把上面說的事件形象的比喻成機關槍的掃射，throttle就是機關槍的扳機，你不放扳機，它就一直掃射。我們開發時用的上面這些事件也是一樣，你不鬆開滑鼠，它的事件就一直觸發。例如：

複製代碼 代碼如下:

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

 

debounce

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

debounce主要應用的情境比如：
文本輸入keydown 事件，keyup 事件，例如做autocomplete

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

複製代碼 代碼如下:

/*
* 頻率控制 返回函數連續調用時，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);

javascript中的throttle和debounce