函數防抖和節(jié)流的區(qū)別以及使用方法

前言

函數防抖和節(jié)流，這個知識點面試中被問的概率比較高。

防抖

非立即執(zhí)行版防抖可以理解為n時間后執(zhí)行一次函數。立即執(zhí)行版防抖是立即執(zhí)行一次函數。

防抖的實現

/**
 * @desc 函數防抖
 * @param {Function} func 函數
 * @param {Number} wait 延遲執(zhí)行毫秒數
 * @param {Boolean} immediate true 表示立即執(zhí)行，false 表示非立即執(zhí)行
 */
function debounce(func, wait, immediate) {
  let timeout
  return function () {
    let context = this
    let args = arguments
    if (timeout) {
      clearTimeout(timeout)
    }
    if (immediate) {
      let callNow = !timeout
      timeout = setTimeout(() => {
        timeout = null
      }, wait)
      if (callNow) {
        typeof func === 'function' && func.apply(context, args)
      }
    } else {
      timeout = setTimeout(() => {
        typeof func === 'function' && func.apply(context, args)
      }, wait)
    }
  }
}

節(jié)流

節(jié)流可以理解為每隔n時間執(zhí)行一次函數。

節(jié)流的實現

/**
 * @desc 函數節(jié)流
 * @param {Function} func 函數
 * @param {Number} wait 延遲執(zhí)行毫秒數
 * @param {Boolean} type true 表示時間戳版，false 表示定時器版
 */
function throttle(func, wait, type) {
  let previous
  let timeout
  if (type) {
    previous = 0
  } else {
    timeout
  }
  return function () {
    let context = this
    let args = arguments
    if (type) {
      let now = Date.now()
      if (now - previous > wait) {
        typeof func === 'function' && func.apply(context, args)
        previous = now
      }
    } else {
      if (!timeout) {
        timeout = setTimeout(() => {
          timeout = null
          typeof func === 'function' && func.apply(context, args)
        }, wait)
      }
    }
  }
}

防抖和節(jié)流的區(qū)別

用文本框輸入文字來演示的話，假如時間都設置為1s，用戶不斷輸入文字，如果是非立即執(zhí)行防抖的話是停止輸入1s后函數執(zhí)行，只執(zhí)行一次，如果是立即執(zhí)行的防抖的話是立即函數執(zhí)行，只執(zhí)行一次。節(jié)流則是在用戶輸入期間，每隔一秒執(zhí)行一次函數，可能會執(zhí)行多次。

防抖和節(jié)流調用的區(qū)別

下面代碼防抖函數和節(jié)流函數都調用了10000000次，但是防抖函數只會執(zhí)行一次，可是節(jié)流函數就很多次了。

let debounceCallback = debounce(function () {
  console.log('debounceCallback')
}, 1000, false)

for (let i = 0; i < 10000000; i++) {
  debounceCallback()
}

let throttleCallback = throttle(function () {
  console.log('throttleCallback')
}, 1000, false)

for (let i = 0; i < 10000000; i++) {
  throttleCallback()
}

以上就是輕松理解函數防抖和節(jié)流的使用的詳細內容，更多請關注億速云其它相關文章！