vue防抖和限流

节流（Throttle）和防抖（Debounce）

简介

节流（Throttle）和防抖（Debounce）对于前端开发人员来说应该是十分熟悉的，节流（Throttle）和防抖（Debounce）是两种可以节省性能的编程技术，两者的目的都是为了优化性能，提高用户体验，都是基于 DOM 事件限制正在执行的 JavaScript 数量的方法。但两者的有什么不一样呢？

节流会强制执行一个函数在一段时间内可以被调用的最大次数。如“最多每 100 毫秒执行一次此函数”。

假设在正常情况下，会在 10 秒内调用此函数 1,000 次。如果将其限制为每 100 毫秒仅一次，则该函数最多只会执行 100 次。

• （10s * 1,000） = 10,000 ms
• 10,000 ms / 100 ms 限制 = 100 个最大调用

防抖强制一个函数在一段时间内没有被调用之前不会被再次调用。如“仅当 100 毫秒过去了而没有被调用时才执行此函数”。

也许一个函数在短时间内被调用 1000 次，分散在3秒内，然后停止调用。如果在 100 毫秒的时间内启动，这个功能只会在 3.1 秒的时间内启动一次。每次在突发事件期间调用该函数时，它都会重置恢复计时器。

区别是什么？

这些概念的一个主要用例是某些 DOM 事件，例如滚动和调整大小。例如，如果将滚动处理程序附加到一个元素，并将该元素向下滚动 5000 像素，可能会看到 100 多个事件被触发。如果事件处理程序做了大量工作（例如繁重的计算和其他 DOM 操作），可能会看到性能问题（卡顿）。如果可以减少执行该处理程序的次数，而不会对经验造成太大影响，那么这可能是值得的。

常用的场景如下：

• 等到用户停止调整窗口大小
• 在用户停止输入之前不要触发 AJAX 事件
• 监测或者获取页面的滚动位置，最多每 100ms 响应一次
• 在应用中拖动元素时确保良好的性能

throttle-debounce

安装

npm install throttle-debounce --save
1

throttle

限制回调函数的执行频率

/**
 * 节流(限制函数的执行频率)
 * @param delay 延迟的时间
 * @param noTrailing 在最后一次调用时是否执行 callback，true 不执行，false 执行
 * @param callback 目标回调函数
 * @param debounceMode
 */
throttle(delay, noTrailing, callback, debounceMode)
1
2
3
4
5
6
7
8

dobounceMode: 为 true 时，在被调用时，先执行 callback，在没有被调用时，在指定的延迟之后执行 clear，如果在clear 执行之前继续调用，会重置定时器；为 false 时，在被调用时，不会执行 callback，在指定的延迟之后执行 callback，如果在 callback 执行之前继续调用，会重置定时器

debounce

限制回掉函数的执行频率，但是不同于 debounce 的是，debounce 能保证在一系列调用的时间内，回调函数只执行一次

atBegin: 为 true 时，在被调用时，会马上执行 callback，如果在延迟时间之前继续调用，不会执行 callback；为 false 时，在被调用时，不会执行 callback，在延迟时间之后会执行 callback，如果在延迟时间之前继续调用，会重置定时器

Lodash

节流（Throttle）场景

$("body").on("scroll", _.throttle(function() {
    // 处理逻辑
}, 100));
1
2
3

防抖（Debounce）场景

实际生活中，如百度搜索，输入文本后会出现下拉选择，这个过程一般绑定文本事件 keypress。

下图描述了使用防抖（Debounce）前状态的性能监控捕获，每次 keypress 引发事件时，它都会触发搜索引擎请求数据并将结果呈现在屏幕上。事实上，这些结果并没有被用户看到，因为它们已经被最新 keypress 事件的后续结果覆盖了，屏幕上仅呈现最新结果。

$(window).on("resize", _.debounce(function() {
   // 处理逻辑
}, 100));
1
2
3