Vue.js示例：文本編輯器。使用_.debounce()反抖動函數

Markdown編輯器

https://cn.vuejs.org/v2/examples/index.html

 

 

新知識：

Underscore.js庫

用於彌補標准庫，方便了JavaScript的編程。

通常的函數的運行：

• 1.請求，調用
• 2.執行
• 3.響應，返回

問題：

某些場景下的用戶行為鼠標移動mousemove，窗口resize,scroll, 文本輸入keyup/keydown，觸發頻率高。如果函數比較復雜，需要較多的執行時間，響應速度跟不上觸發頻率。導致出現延遲，假死，卡頓現象。

 

解決：

在客戶端／服務器模式，不可能要求客戶升級硬件系統。那么在處理函數無法即時響應高頻調用的情況下，

只響應（返回）部分請求。這樣總執行時間會減少，響應速度就會提高。

 

網絡原文（文摘）很全面生動的一篇文章

 

_.debounce函數：「防反彈(去抖動)函數」

設定一個記時時段：

• 時段內，如果無新的請求，在時間結束后，響應結果。
• 如果有新的請求，從新開始記時。

源代碼：

/**
 * 空閑控制 返回函數連續調用時，空閑時間必須大於或等於 wait，func 才會執行
 *
 * @param  {function} func        傳入函數
 * @param  {number}   wait        表示時間窗口的間隔
 * @param  {boolean}  immediate   設置為ture時，調用觸發於開始邊界而不是結束邊界
 * @return {function}             返回客戶調用函數
 */
_.debounce = function(func, wait, immediate) {
  var timeout, args, context, timestamp, result;

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

    // 上次被包裝函數被調用時間間隔last小於設定時間間隔wait
    if (last < wait && last > 0) {
      timeout = setTimeout(later, wait - last);
    } else {
      timeout = null;
      // 如果設定為immediate===true，因為開始邊界已經調用過了此處無需調用
      if (!immediate) {
        result = func.apply(context, args);
        if (!timeout) context = args = null;
      }
    }
  };

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

    return result;
  };
};