李钟意讲前端

外观

咨询/接单/付费bug修复/学习交流群

去抖 vs 节流 ​

你是否可以详细讲解一下 lodash js 的去抖和节流 都有哪些参数和作用，详细一点 ​

当然，我很乐意为您详细介绍 lodash 的去抖（debounce）和节流（throttle）函数。

首先，我们应该理解去抖和节流的概念：

  1. 去抖 (Debounce): 当持续触发事件时，去抖函数会确保在一定时间内只调用一次函数。常用于优化搜索输入、窗口大小调整等类型的事件。

  2. 节流 (Throttle): 当持续触发事件时，节流函数会以一定的频率来调用函数。节流会强制函数以固定的速率执行，比如每 200ms 执行一次。这种情况在滚动事件或者鼠标移动事件中特别有用。

下面，让我们看一下这两个函数的参数和用法。

  1. _.debounce(func, [wait=0], [options={}])

这个函数创建一个去抖（debounced）版本的函数，该函数会在等待一段时间后调用原始函数。如果新的函数在等待期间被调用，等待期将重新开始。

参数：

  • func (函数): 需要去抖的函数
  • wait (数值): 延迟的毫秒数
  • options (对象): 配置选项
    • leading: 如果为真，那么在开始阶段立即调用函数
    • maxWait: 函数最大延迟调用的毫秒数
    • trailing: 如果为真，那么在延迟结束后调用函数
  1. _.throttle(func, [wait=0], [options={}])

这个函数创建一个节流（throttled）版本的函数，该函数不会在 wait 时间内超过一次的调用。

参数：

  • func (函数): 需要节流的函数
  • wait (数值): 节流的毫秒数
  • options (对象): 配置选项
    • leading: 如果为真，那么在开始阶段立即调用函数
    • trailing: 如果为真，那么在延迟结束后调用函数

这就是 lodash 的去抖和节流函数的基本概念和用法。这两个函数可以非常有效地控制事件处理函数的执行频率，防止在短时间内触发大量的事件处理函数，从而提高性能。

我有一个频繁更新 vue3 Pinia 中存储的状态，他是一个进度条，我应该使用使用 lodash 节流还是去抖，然后等待多长时间比较合适，如果不做限制的去更新 Pinia 我现在页面直接就卡住了，我希望用户体验最好的 wait 的值，你可以根据你所知道的给出建议吗 ​

在处理进度条更新这种情况时，您应该使用“节流”（throttle）而不是“去抖”（debounce）。原因在于，节流能保证在一段时间内至少执行一次，从而让用户看到进度条的更新。而去抖可能会导致在用户停止某个动作之前，进度条一直不更新，这可能会让用户感到困惑。

至于“等待时间”（wait），这实际上取决于您的具体应用场景，但一般来说，一个合理的范围可能是 100ms 到 200ms。这个时间段足够短，用户不会感觉到明显的延迟，同时又能够显著降低事件处理函数的调用频率。但是，我建议您根据自己的应用进行实际测试，找到最适合您的值。

以下是一个简单的例子，假设 updateProgress 是更新进度条的方法：

javascript
import { throttle } from "lodash";

// 创建一个被节流的函数
const throttledUpdate = throttle(updateProgress, 100);

// 在需要更新进度条的地方使用这个节流函数
throttledUpdate();

这样，updateProgress 方法就不会频繁地被调用，可以有效减轻您页面的卡顿问题。