摘要：如果想忽略結(jié)尾邊界上的調(diào)用，傳入返回客戶(hù)調(diào)用函數(shù)上次執(zhí)行時(shí)間點(diǎn)延遲執(zhí)行函數(shù)若設(shè)定了開(kāi)始邊界不執(zhí)行選項(xiàng)，上次執(zhí)行時(shí)間始終為首次執(zhí)行時(shí)，如果設(shè)定了開(kāi)始邊界不執(zhí)行選項(xiàng)，將上次執(zhí)行時(shí)間設(shè)定為當(dāng)前時(shí)間。

  
Underscore.js 是一個(gè)很精干的庫(kù)，壓縮后只有5.2KB。它提供了幾十種函數(shù)式編程的方法，彌補(bǔ)了標(biāo)準(zhǔn)庫(kù)的不足，大大方便了JavaScript的編程。
  
  
本文僅探討Underscore.js的兩個(gè)函數(shù)方法 _.throttle 和 _.debounce 的原理、效果和用途。

通常的函數(shù)（或方法）調(diào)用過(guò)程分為三個(gè)部分：請(qǐng)求、執(zhí)行和響應(yīng)。（文中“請(qǐng)求”與“調(diào)用”同義，“響應(yīng)”與“返回”同義，為了更好的表述，刻意采用請(qǐng)求和響應(yīng)的說(shuō)法。）

某些場(chǎng)景下，比如響應(yīng)鼠標(biāo)移動(dòng)或者窗口大小調(diào)整的事件，觸發(fā)頻率比較高。若稍處理函數(shù)微復(fù)雜，需要較多的運(yùn)算執(zhí)行時(shí)間，響應(yīng)速度跟不上觸發(fā)頻率，往往會(huì)出現(xiàn)延遲，導(dǎo)致假死或者卡頓感。

在運(yùn)算資源不夠的時(shí)候，最直觀的解決辦法就是升級(jí)硬件，誠(chéng)然通過(guò)購(gòu)買(mǎi)更好的硬件可以解決部分問(wèn)題，但是也需要為此付出高額的成本。特別是客戶(hù)端和服務(wù)器模式，要求客戶(hù)端統(tǒng)一升級(jí)硬件基本不可能。

在資源有限的前提下，處理函數(shù)無(wú)法即時(shí)響應(yīng)高頻調(diào)用。退而求其次，只響應(yīng)部分請(qǐng)求是否可行呢？某些場(chǎng)景下的密集性請(qǐng)求，具備很強(qiáng)的同質(zhì)和連續(xù)性。比如說(shuō)，鼠標(biāo)移動(dòng)的軌跡參數(shù)。響應(yīng)越及時(shí)效果越平滑，但是如果響應(yīng)速度跟不上時(shí)，反而會(huì)出現(xiàn)卡頓感，如果適當(dāng)?shù)膩G棄一些請(qǐng)求效果更流暢。

throttle 和 debounce 是解決請(qǐng)求和響應(yīng)速度不匹配問(wèn)題的兩個(gè)方案。二者的差異在于選擇不同的策略。

想象每天上班大廈底下的電梯。把電梯完成一次運(yùn)送，類(lèi)比為一次函數(shù)的執(zhí)行和響應(yīng)。假設(shè)電梯有兩種運(yùn)行策略 throttle 和 debounce ，超時(shí)設(shè)定為15秒，不考慮容量限制。

throttle 策略的電梯。保證如果電梯第一個(gè)人進(jìn)來(lái)后，15秒后準(zhǔn)時(shí)運(yùn)送一次，不等待。如果沒(méi)有人，則待機(jī)。

debounce 策略的電梯。如果電梯里有人進(jìn)來(lái)，等待15秒。如果又人進(jìn)來(lái)，15秒等待重新計(jì)時(shí)，直到15秒超時(shí)，開(kāi)始運(yùn)送。

function log( event ) {
  console.log( $(window).scrollTop(), event.timeStamp );
};

// 控制臺(tái)記錄窗口滾動(dòng)事件，觸發(fā)頻率比你想象的要快
$(window).scroll( log );

// 控制臺(tái)記錄窗口滾動(dòng)事件，每250ms最多觸發(fā)一次
$(window).scroll( _.throttle( log, 250 ) );

function ajax_lookup( event ) {
  // 對(duì)輸入的內(nèi)容$(this).val()執(zhí)行 Ajax 查詢(xún)
};

// 字符輸入的頻率比你預(yù)想的要快，Ajax 請(qǐng)求來(lái)不及回復(fù)。
$("input:text").keyup( ajax_lookup );

// 當(dāng)用戶(hù)停頓250毫秒以后才開(kāi)始查找
$("input:text").keyup( _.debounce( ajax_lookup. 250 ) );

讓我們來(lái)讀讀源碼，探其究竟?；陂_(kāi)發(fā)版本（1.7.0）的源碼，加上了一些注釋以幫助理解。

/**
 * 頻率控制 返回函數(shù)連續(xù)調(diào)用時(shí)，func 執(zhí)行頻率限定為 次 / wait
 * 
 * @param  {function}   func      傳入函數(shù)
 * @param  {number}     wait      表示時(shí)間窗口的間隔
 * @param  {object}     options   如果想忽略開(kāi)始邊界上的調(diào)用，傳入{leading: false}。
 *                                如果想忽略結(jié)尾邊界上的調(diào)用，傳入{trailing: false}
 * @return {function}             返回客戶(hù)調(diào)用函數(shù)   
 */
_.throttle = function(func, wait, options) {
  var context, args, result;
  var timeout = null;
  // 上次執(zhí)行時(shí)間點(diǎn)
  var previous = 0;
  if (!options) options = {};
  // 延遲執(zhí)行函數(shù)
  var later = function() {
    // 若設(shè)定了開(kāi)始邊界不執(zhí)行選項(xiàng)，上次執(zhí)行時(shí)間始終為0
    previous = options.leading === false ? 0 : _.now();
    timeout = null;
    result = func.apply(context, args);
    if (!timeout) context = args = null;
  };
  return function() {
    var now = _.now();
    // 首次執(zhí)行時(shí)，如果設(shè)定了開(kāi)始邊界不執(zhí)行選項(xiàng)，將上次執(zhí)行時(shí)間設(shè)定為當(dāng)前時(shí)間。
    if (!previous && options.leading === false) previous = now;
    // 延遲執(zhí)行時(shí)間間隔
    var remaining = wait - (now - previous);
    context = this;
    args = arguments;
    // 延遲時(shí)間間隔remaining小于等于0，表示上次執(zhí)行至此所間隔時(shí)間已經(jīng)超過(guò)一個(gè)時(shí)間窗口
    // remaining大于時(shí)間窗口wait，表示客戶(hù)端系統(tǒng)時(shí)間被調(diào)整過(guò)
    if (remaining <= 0 || remaining > wait) {
      clearTimeout(timeout);
      timeout = null;
      previous = now;
      result = func.apply(context, args);
      if (!timeout) context = args = null;
    //如果延遲執(zhí)行不存在，且沒(méi)有設(shè)定結(jié)尾邊界不執(zhí)行選項(xiàng)
    } else if (!timeout && options.trailing !== false) {
      timeout = setTimeout(later, remaining);
    }
    return result;
  };
};

/**
 * 空閑控制 返回函數(shù)連續(xù)調(diào)用時(shí)，空閑時(shí)間必須大于或等于 wait，func 才會(huì)執(zhí)行
 *
 * @param  {function} func        傳入函數(shù)
 * @param  {number}   wait        表示時(shí)間窗口的間隔
 * @param  {boolean}  immediate   設(shè)置為ture時(shí)，調(diào)用觸發(fā)于開(kāi)始邊界而不是結(jié)束邊界
 * @return {function}             返回客戶(hù)調(diào)用函數(shù)
 */
_.debounce = function(func, wait, immediate) {
  var timeout, args, context, timestamp, result;

  var later = function() {
    // 據(jù)上一次觸發(fā)時(shí)間間隔
    var last = _.now() - timestamp;

    // 上次被包裝函數(shù)被調(diào)用時(shí)間間隔last小于設(shè)定時(shí)間間隔wait
    if (last < wait && last > 0) {
      timeout = setTimeout(later, wait - last);
    } else {
      timeout = null;
      // 如果設(shè)定為immediate===true，因?yàn)殚_(kāi)始邊界已經(jīng)調(diào)用過(guò)了此處無(wú)需調(diào)用
      if (!immediate) {
        result = func.apply(context, args);
        if (!timeout) context = args = null;
      }
    }
  };

  return function() {
    context = this;
    args = arguments;
    timestamp = _.now();
    var callNow = immediate && !timeout;
    // 如果延時(shí)不存在，重新設(shè)定延時(shí)
    if (!timeout) timeout = setTimeout(later, wait);
    if (callNow) {
      result = func.apply(context, args);
      context = args = null;
    }

    return result;
  };
};

示例中每一行都以30ms的速度繪制時(shí)間軸，第一行Mousemove Events是參考基準(zhǔn)，以50ms每次的響應(yīng)頻率，在時(shí)間軸上輸出循環(huán)可見(jiàn)ASCII碼字符。

當(dāng)鼠標(biāo)進(jìn)入左側(cè)方型區(qū)域（mouseenter 事件）所有行開(kāi)始繪制時(shí)間軸, 鼠標(biāo)晃動(dòng)（mousemove 事件）會(huì)在時(shí)間軸上繪制字符塊，每個(gè)字符塊表示事件被觸發(fā)一次。為了展現(xiàn)延遲觸發(fā)效果，相鄰字符塊的演示和文字是不同的。

頂部的兩個(gè)按鈕每100毫秒觸發(fā)1次和每200毫秒觸發(fā)2次演示以固定頻率勻速觸發(fā)事件的效果。

演示地址：http://throttle-debounce.coding.io/

源碼地址：https://coding.net/u/duwan/p/throttle-debounce/

只要牽涉到連續(xù)事件或頻率控制相關(guān)的應(yīng)用都可以考慮到這兩個(gè)函數(shù)，比如：

游戲射擊，keydown 事件

文本輸入、自動(dòng)完成，keyup 事件

鼠標(biāo)移動(dòng)，mousemove 事件

DOM 元素動(dòng)態(tài)定位，window 對(duì)象的 resize 和 scroll 事件

前兩者 debounce 和 throttle 都可以按需使用；后兩者肯定是用 throttle 了。如果不做過(guò)濾處理，每秒種甚至?xí)|發(fā)數(shù)十次相應(yīng)的事件。尤其是 mousemove 事件，每移動(dòng)一像素都可能觸發(fā)一次事件。如果是在一個(gè)畫(huà)布上做一個(gè)鼠標(biāo)相關(guān)的應(yīng)用，過(guò)濾事件處理是必須的，否則肯定會(huì)造成糟糕的體驗(yàn)。

UNDERSCORE.JS

高階函數(shù) debounce 和 throttle

jQuery throttle / debounce: Sometimes, less is more!

Debounce and Throttle: a visual explanation

  

  
  Vangie Du
  
  
將來(lái)的你，一定會(huì)感謝現(xiàn)在拼命努力的自己！

技術(shù)博客: http://blog.coding.net/