防抖与节流

DLGDark

已于 2023-02-15 16:34:29 修改

阅读量157

点赞数

分类专栏： js 文章标签： javascript 前端防抖节流性能优化

于 2023-02-15 16:32:09 首次发布

本文链接：https://blog.csdn.net/DLGDark/article/details/129045684

版权

js 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

防抖和节流是JavaScript中用于优化性能的两种策略。防抖技术确保在特定时间间隔内只执行最后一次函数调用，而节流则保证在设定的时间内只执行一次函数。这两种方法常用于处理频繁触发的事件，如输入框搜索、按钮点击、页面滚动和窗口resize/scroll事件，以提高应用性能。

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

防抖

原理：
当事件被触发 n 秒后再执行回调，如果在 n 秒内又被触发，则重新计时。

使用场景：
频繁触发按钮点击事件、input框搜索等等。
一个搜索输入框，用户不停的进行输入（这个时候就是抖动的过程），等用户输入停止之后，再触发搜索

// 防抖（一定时间内触发多次，会取消中间的多次触发，只执行最后一次触发）
export const debounce = (func, wait) => {
  let delay = wait || 500;
  let timer;
  return () => {
    const _this = this;
    let args = arguments;

    // 防抖与节流关键代码行
    if (timer) {
      clearTimeout(timer)
    }

    timer = setTimeout(() => {
      func.apply(_this, args)
      timer = null
    }, delay)
  }
}

节流

原理：
规定在一个单位时间内只能触发一次函数，如果在单位时间内触发多次,只执行一次。比如两秒内的点击事件，无论点多少次，两秒内只执行一次。

使用场景：
下拉加载更多（无限滚动）事件、浏览器的resize，scroll事件等等

// 节流（单位时间内执行一次。时间内触发多次，只执行一次。即每隔一段时间执行一次）
export const throttle = (func, wait) => {
  let delay = wait || 500;
  let timer;
  return () => {
    const _this = this;
    let args = arguments;

    // 节流与防抖关键代码行
    if (timer) {
      return
    }

    timer = setTimeout(() => {
      func.apply(_this, args)
      timer = null
    }, delay)
  }
}