防抖与节流函数

song854601134

已于 2023-04-25 13:33:33 修改

阅读量59

点赞数

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

于 2023-04-21 10:54:56 首次发布

本文链接：https://blog.csdn.net/song854601134/article/details/130283422

版权

javascript 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

该文章介绍了一个JavaScript函数防抖(debounce)的实现，用于优化事件处理，特别是频繁触发时如输入框变化。函数接受一个执行函数、延迟时间和是否立即执行作为参数，确保在设定的延迟时间内只执行最后一次调用，并可选地传递回调函数来处理返回值。示例中展示了如何在输入框输入事件中使用防抖函数，以提高性能。

摘要由CSDN通过智能技术生成

    debounce(fn, delay, immdiate = false, resultCallback) {
      let timer = null
      let isInvoke = false
      function _debounce(...arg) {
        if (timer) clearTimeout(timer)
        if (immdiate && !isInvoke) {
          const result = fn.apply(this, arg)
          if (resultCallback && typeof resultCallback === 'function') resultCallback(result)
          isInvoke = true
        } else {
          timer = setTimeout(() => {
            const result = fn.apply(this, arg)
            if (resultCallback && typeof resultCallback === 'function') resultCallback(result)
            isInvoke = false
            timer = null
          }, delay)
        }
      }

      _debounce.cancel = function() {
        if (timer) clearTimeout(timer)
        timer = null
        isInvoke = false
      }
      return _debounce
    },

使用方法

const inputChange = function () {
  console.log("输入框发生变化")
  return "想不到吧，产品经理让你得到我的返回值"
}

const debounceChange = debounce(inputChange, 3000, false, (res) => {
  console.log("fn的返回值是:" + res);
})

inputDom.addEventListener('input', debounceChange)