JS手写防抖（debounce）函数

OnTheRoad_ING

已于 2023-04-28 14:56:07 修改

阅读量127

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言 ecmascript

于 2023-04-22 22:12:39 首次发布

本文链接：https://blog.csdn.net/OnTheRoad_ING/article/details/130311512

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

JS手写防抖（debounce）函数

/**
 * 延迟一个函数的执行
 * 单位时间内如果再次触发则重新计时
 * 实现功能：
 *  1. 是否立即执行
 *  2. 可以取消
 * 参数：
 *  1. 被防抖的函数  fn   
 *  2. 延时的时间   delay
 *  3. 首次执行     immididate
 *  4. 回调函数     callback
 * 
 * */
function myDebounce(fn, delay, immidiate = false, callback) {
  let timer = null
  let isInvoke = false
  function _debounce(...args) {
    return new Promise((resolve, reject) => {
      try {
        if (timer) {
          clearTimeout(timer)
        }
        if (immidiate && !isInvoke) {
          const res = fn.apply(this, args)
          callback && callback(res)
          resolve(res)
          isInvoke = true
        }
        timer = setTimeout(() => {
          const res = fn.apply(this, args)
          callback && callback(res)
          resolve(res)
          isInvoke = false
        }, delay);
      } catch (error) {
        reject(error)
      }
    })
  }
  _debounce.cancel = function () {
    clearTimeout(timer)
    isInvoke = false
  }
  return _debounce
}