什么是节流和防抖,工具方法封装

原创已于 2022-01-19 21:02:59 修改 · 275 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2021-02-17 22:30:20 首次发布

js 专栏收录该内容

68 篇文章

订阅专栏

本文介绍了JavaScript中两种重要的性能优化技巧——防抖(debounce)和节流(throttle)。防抖技术确保在连续操作后只执行最后一次，常用于搜索框的实时搜索请求。节流则规定在设定时间内只触发一次，适用于频繁触发的事件，如滚动事件中的页面加载。文中提供了详细的防抖和节流函数实现，有助于优化应用性能并减轻服务器压力。

节流(throttle)
节流的意思是，规定时间内，只触发一次。比如我们设定500ms，在这个时间内，无论点击按钮多少次，它都只会触发一次。具体场景可以是抢购时候，由于有无数人快速点击按钮，如果每次点击都发送请求，就会给服务器造成巨大的压力，但是我们进行节流后，就会大大减少请求的次数。
防抖(debounce)
防抖的意思是，在连续的操作中，无论进行了多长时间，只有某一次的操作后在指定的时间内没有再操作，这一次才被判定有效。具体场景可以搜索框输入关键字过程中实时请求服务器匹配搜索结果，如果不进行处理，那么就是输入框内容一直变化，导致一直发送请求。如果进行防抖处理，结果就是当我们输入内容完成后，一定时间(比如500ms)没有再输入内容，这时再触发请求。

以上摘自uview官方给出的解释,因为言简意赅,顺便记录下来

防抖节流工具方法:

// 防抖
// fn:要防抖的方法,time:间隔时间,毫秒
function fn1 (fn, time) {
  let _time = null
  return function () {
    const _arg = arguments
    const _this = this
    if (_time) {
      clearTimeout(_time)
    }
    _time = setTimeout(() => {
      fn.apply(_this, _arg)
    }, time)
  }
}

// 节流
function fn2 (fn, time) {
  let isLoading = false
  return function () {
    const _arg = arguments
    if (!isLoading) {
      isLoading = true
      const _this = this
      setTimeout(() => {
        fn.apply(_this, _arg)
        isLoading = false
      }, time)
    }
  }
}
export { fn1, fn2 }

2022/1/19补充immediately版本:

// 防抖
function debounce(callback, delay, immediately = true/* 默认是立刻执行 */) {
            let timer = null;
            return function (...restArgs) {
                // 绑定this, 解决this指向全局
                const bindThisCallback = callback.bind(this, ...restArgs)
                // 在下一次定时器创建之前清除上一次的定时器
                if (timer) clearTimeout(timer);
                timer = setTimeout(function () {
                    // 如果不执行第一次则跳过,修改条件为true
                    if (!immediately) {
                        immediately = true;
                        return;
                    }
                    bindThisCallback && bindThisCallback();
                }, delay);
            }
        }
// 节流
function throttle(callback, delay, immediately = true/* 默认立刻执行 */) {
            // 节流阀
            let isOpen = true;
            return function (...restArgs) {
                // 绑定回调的this指向
                const bindThisCallback = callback.bind(this, ...restArgs)
                if (isOpen) {
                    // 执行前关闭节流阀
                    isOpen = false;
                    setTimeout(() => {
                        // 如果是第一次不执行就打开节流阀等待下一次
                        if (!immediately) {
                            immediately = true;
                            isOpen = true;
                            return;
                        }
                        bindThisCallback && bindThisCallback();
                        // 执行完上一次就打开节流阀
                        isOpen = true;
                    }, delay)
                }
            }
        }