JS - debounce(去抖) 和 throttle(節(jié)流)

Mike617 發(fā)布于2019-08-23 18:36 / 3150人閱讀

摘要：多次連續(xù)事件觸發(fā)動(dòng)作最后一次觸發(fā)之后的指定時(shí)間間隔執(zhí)行回調(diào)函數(shù)預(yù)先設(shè)定一個(gè)執(zhí)行周期，當(dāng)調(diào)用動(dòng)作的時(shí)刻大于等于執(zhí)行周期則執(zhí)行該動(dòng)作，然后進(jìn)入下一個(gè)新的時(shí)間周期。

定義

為了避免某個(gè)事件在較短的時(shí)間段內(nèi)（稱為 T）內(nèi)連續(xù)觸發(fā)從而引起的其對(duì)應(yīng)的事件處理函數(shù)不必要的連續(xù)執(zhí)行的一種事件處理機(jī)制（高頻觸發(fā)事件解決方案）
debounce：當(dāng)調(diào)用動(dòng)作觸發(fā)一段時(shí)間后，才會(huì)執(zhí)行該動(dòng)作，若在這段時(shí)間間隔內(nèi)又調(diào)用此動(dòng)作則將重新計(jì)算時(shí)間間隔。（多次連續(xù)事件觸發(fā)動(dòng)作/最后一次觸發(fā)之后的指定時(shí)間間隔執(zhí)行回調(diào)函數(shù)）
throttle：預(yù)先設(shè)定一個(gè)執(zhí)行周期，當(dāng)調(diào)用動(dòng)作的時(shí)刻大于等于執(zhí)行周期則執(zhí)行該動(dòng)作，然后進(jìn)入下一個(gè)新的時(shí)間周期。（每個(gè)指定時(shí)間執(zhí)行一次回調(diào)函數(shù)，可以指定時(shí)間間隔之前調(diào)用）

區(qū)別

1、throttle 保證了在每個(gè) T 內(nèi)至少執(zhí)行一次，而 debounce 沒有這樣的保證
2、每次事件觸發(fā)時(shí)參考的時(shí)間點(diǎn)，對(duì)于debounce來是上一次事件觸發(fā)的時(shí)間并且在延時(shí)沒有結(jié)束時(shí)會(huì)重置延時(shí)；
throttle 是上一次 handler 執(zhí)行的時(shí)間并且在延時(shí)尚未結(jié)束時(shí)不會(huì)重置延時(shí)

影響

響應(yīng)速度跟不上觸發(fā)頻率，往往會(huì)出現(xiàn)延遲，導(dǎo)致假死或者卡頓感

實(shí)現(xiàn) 去抖 debounce

空閑控制：所有操作最后一次性執(zhí)行

【簡(jiǎn)潔版】

/**
* @param fn {Function}   實(shí)際要執(zhí)行的函數(shù)
* @param delay {Number}  延遲時(shí)間，也就是閾值，單位是毫秒（ms）
* @return {Function}     返回一個(gè)“去彈跳”了的函數(shù)
*/
function debounce(fn, delay) {
  // 定時(shí)器，用來 setTimeout
  var timer

  // 返回一個(gè)函數(shù)，這個(gè)函數(shù)會(huì)在一個(gè)時(shí)間區(qū)間結(jié)束后的 delay 毫秒時(shí)執(zhí)行 fn 函數(shù)
  return function () {
    // 保存函數(shù)調(diào)用時(shí)的上下文和參數(shù)，傳遞給 fn
    var context = this
    var args = arguments

    // 每次這個(gè)返回的函數(shù)被調(diào)用，就清除定時(shí)器，以保證不執(zhí)行 fn
    clearTimeout(timer)

    // 當(dāng)返回的函數(shù)被最后一次調(diào)用后（也就是用戶停止了某個(gè)連續(xù)的操作），
    // 再過 delay 毫秒就執(zhí)行 fn
    timer = setTimeout(function () {
      fn.apply(context, args)
    }, delay)
  }
}

【完整版】

// immediate： 是否立即執(zhí)行回調(diào)函數(shù); 其它參數(shù)同上
function debounce(fn, wait, immediate) {
    let timer = null

    return function() {
        let args = [].slice.call(arguments)

        if (immediate && !timer) {
            fn.apply(this, args)
        }

        if (timer) clearTimeout(timer)
        timer = setTimeout(() => { //箭頭函數(shù)，this指向外層環(huán)境
            fn.apply(this, args)
        }, wait)
    }
}

// 測(cè)試：
var fn = function() {
    console.log("debounce..")
}
oDiv.addEventListener("click", debounce(fn, 3000))

節(jié)流 throttle

固定頻次：減少執(zhí)行頻次，每隔一定時(shí)間執(zhí)行一次

【簡(jiǎn)潔版】

/**
* 固定回調(diào)函數(shù)執(zhí)行的頻次
* @param fn {Function}   實(shí)際要執(zhí)行的函數(shù)
* @param interval {Number}  執(zhí)行間隔，單位是毫秒（ms）
*
* @return {Function}     返回一個(gè)“節(jié)流”函數(shù)
*/
var throttle = function (fn, interval) {
  // 記錄前一次時(shí)間
  var last = +new Date()
  var timer = null
  // 包裝完后返回 閉包函數(shù)
  return function () {
    var current = +new Date()
    var args = [].slice.call(arguments, 0)
    var context = this
    // 首先清除定時(shí)器
    clearTimeout(timer)
    // current 與last 間隔大于interval 執(zhí)行一次fn
    // 在一個(gè)周期內(nèi) last相對(duì)固定 current一直再增加
    // 這里可以保證調(diào)用很密集的情況下 current和last 必須是相隔interval 才會(huì)調(diào)用fn
    if (current - last >= interval) {
      fn.apply(context, args)
      last = current
    } else {
      // 如果沒有大于間隔 添加定時(shí)器
      // 這可以保證 即使后面沒有再次觸發(fā) fn也會(huì)在規(guī)定的interval后被調(diào)用
      timer = setTimeout(function() {
        fn.apply(context, args)
        last = current
      }, interval-(current - last))
    }
  }
}

【完整版】

/**
 * 頻率控制 返回函數(shù)連續(xù)調(diào)用時(shí)，func 執(zhí)行頻率限定為 次 / wait
 * 自動(dòng)合并 data
 * 
 * 若無 option 選項(xiàng)，或者同時(shí)為true，即 option.trailing !== false && option.leading !== false，在固定時(shí)間開始時(shí)刻調(diào)用一次回調(diào)，并每個(gè)固定時(shí)間最后時(shí)刻調(diào)用回調(diào)
 * 若 option.trailing !== false && option.leading === false, 每個(gè)固定時(shí)間最后時(shí)刻調(diào)用回調(diào)
 * 若 option.trailing === false && option.leading  !== false,  只會(huì)在固定時(shí)間開始時(shí)刻調(diào)用一次回調(diào)
 * 若同時(shí)為false 則不會(huì)被調(diào)用
 *
 * @param  {function}   func      傳入函數(shù)
 * @param  {number}     wait      表示時(shí)間窗口的間隔
 * @param  {object}     options   如果想忽略開始邊界上的調(diào)用，傳入{leading: false}。默認(rèn)undefined
 *                                如果想忽略結(jié)尾邊界上的調(diào)用，傳入{trailing: false}， 默認(rèn)undefined
 * @return {function}             返回客戶調(diào)用函數(shù)
 */
function throttle (func, wait, options) {
  var context, args, result;
  var timeout = null;
  // 上次執(zhí)行時(shí)間點(diǎn)
  var previous = 0;
  if (!options) { options = {}; }
  // 延遲執(zhí)行函數(shù)
  function later () {
    // 若設(shè)定了開始邊界不執(zhí)行選項(xiàng)，上次執(zhí)行時(shí)間始終為0
    previous = options.leading === false ? 0 : Date.now();
    timeout = null;
    result = func.apply(context, args);
    if (!timeout) { context = args = null; }
  }
  return function (handle, data) {
    var now = Date.now();
    // 首次執(zhí)行時(shí)，如果設(shè)定了開始邊界不執(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 = args ? [handle, Object.assign(args[1], data)] : [handle, data];
    // 延遲時(shí)間間隔remaining小于等于0，表示上次執(zhí)行至此所間隔時(shí)間已經(jīng)超過一個(gè)時(shí)間窗口
    // remaining大于時(shí)間窗口wait，表示客戶端系統(tǒng)時(shí)間被調(diào)整過
    if (remaining <= 0 || remaining > wait) {
      clearTimeout(timeout);
      timeout = null;
      previous = now;
      result = func.apply(context, args);
      if (!timeout) { context = args = null; }
    // 如果延遲執(zhí)行不存在，且沒有設(shè)定結(jié)尾邊界不執(zhí)行選項(xiàng)
    } else if (!timeout && options.trailing !== false) {
      timeout = setTimeout(later, remaining);
    }
    return result
  }
}

運(yùn)用

游戲射擊，keydown 事件

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

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

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

前兩者 debounce 和 throttle 都可以按需使用；后兩者肯定是用 throttle

underscore 實(shí)現(xiàn)源碼 debounce

_.debounce = function(func, wait, immediate) {
  var timeout, result;

  var later = function(context, args) {
    timeout = null;
    if (args) result = func.apply(context, args);
  };

  var debounced = restArgs(function(args) {
    if (timeout) clearTimeout(timeout);
    if (immediate) {
      var callNow = !timeout;
      timeout = setTimeout(later, wait);
      if (callNow) result = func.apply(this, args);
    } else {
      timeout = _.delay(later, wait, this, args);
    }

    return result;
  });

  debounced.cancel = function() {
    clearTimeout(timeout);
    timeout = null;
  };

  return debounced;
};

throttle

 _.throttle = function(func, wait, options) {
  var timeout, context, args, result;
  var previous = 0;
  if (!options) options = {};

  var later = function() {
    previous = options.leading === false ? 0 : _.now();
    timeout = null;
    result = func.apply(context, args);
    if (!timeout) context = args = null;
  };

  var throttled = function() {
    var now = _.now();
    if (!previous && options.leading === false) previous = now;
    var remaining = wait - (now - previous);
    context = this;
    args = arguments;
    if (remaining <= 0 || remaining > wait) {
      if (timeout) {
        clearTimeout(timeout);
        timeout = null;
      }
      previous = now;
      result = func.apply(context, args);
      if (!timeout) context = args = null;
    } else if (!timeout && options.trailing !== false) {
      timeout = setTimeout(later, remaining);
    }
    return result;
  };

  throttled.cancel = function() {
    clearTimeout(timeout);
    previous = 0;
    timeout = context = args = null;
  };

  return throttled;
};

【參考】
https://blog.coding.net/blog/...
https://github.com/lishengzxc...

云服務(wù)器 GPU云服務(wù)器 js函數(shù)節(jié)流 throttle debounce 聊一聊去抖

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/105533.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Mike617

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

阿里云企業(yè)和個(gè)人賬號(hào)區(qū)別是什么?阿里云企業(yè)認(rèn)證和個(gè)人實(shí)名認(rèn)證區(qū)別

閱讀 2633·2021-11-19 09:59
上百道最新前端面試題

閱讀 2126·2019-08-30 15:55
前端小白進(jìn)階筆記之多級(jí)菜單分享

閱讀 1008·2019-08-29 13:30
簡(jiǎn)單的node爬蟲存入excel數(shù)據(jù)分析

閱讀 1408·2019-08-26 10:18
JS - debounce(去抖) 和 throttle(節(jié)流)

閱讀 3151·2019-08-23 18:36
JavaScript 之原型和原型鏈

閱讀 2451·2019-08-23 18:25
webpack 配置多頁面應(yīng)用的一次嘗試

閱讀 1231·2019-08-23 18:07
url字符串解析

閱讀 499·2019-08-23 17:15

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

JS - debounce(去抖) 和 throttle(節(jié)流)

相關(guān)文章

JS中的函數(shù)去抖與節(jié)流

**JS throttle與debounce的區(qū)別**

**函數(shù)節(jié)流（throttle）與函數(shù)去抖（debounce）**

**JavaScript 函數(shù)節(jié)流和函數(shù)去抖應(yīng)用場(chǎng)景辨析**

**js中函數(shù)節(jié)流&函數(shù)去抖**

發(fā)表評(píng)論

0條評(píng)論

Mike617

男|高級(jí)講師

TA的文章

阿里云企業(yè)和個(gè)人賬號(hào)區(qū)別是什么?阿里云企業(yè)認(rèn)證和個(gè)人實(shí)名認(rèn)證區(qū)別

上百道最新前端面試題

前端小白進(jìn)階筆記之多級(jí)菜單分享

簡(jiǎn)單的node爬蟲存入excel數(shù)據(jù)分析