函數去抖(debounce)和函數節流(throttle)

一、定義

函數去抖(debounce)和函數節流(throttle)都是函數調用頻率的控制器。

_.debounce(func, [wait=0], [options={}])

  1. func (Function): 要防抖動的函數。
  2. [wait=0] (number): 需要延遲的毫秒數。
  3. [options={}] (Object): 選項對象。
  4. [options.leading=false] (boolean): 指定在延遲開始前調用。
  5. [options.maxWait] (number): 設置 func 允許被延遲的最大值。
  6. [options.trailing=true] (boolean): 指定在延遲結束後調。

deboucne還有cancel方法,用於取消防抖動調用。

示例:

// 避免窗口在變動時出現昂貴的計算開銷。
jQuery(window).on('resize', _.debounce(calculateLayout, 150));

// 當點擊時 `sendMail` 隨後就被調用。
jQuery(element).on('click', _.debounce(sendMail, 300, {
  'leading': true,
  'trailing': false
}));

// 確保 `batchLog` 調用1次之後,1秒內會被觸發。
var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
var source = new EventSource('/stream');
jQuery(source).on('message', debounced);

// 取消一個 trailing 的防抖動調用
jQuery(window).on('popstate', debounced.cancel);

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章