从防抖到节流，一文读懂前端优化事件处理函数

前端

2023-12-11 23:05:29

前言

在前端开发中，我们经常会遇到需要处理持续触发事件的情况，如滚动、调整窗口大小、输入、鼠标移动等。如果我们不对这些事件进行处理，那么它们就会不断地触发事件处理函数，这可能会导致性能问题。

防抖和节流

防抖和节流都是用来优化事件处理函数的技术，但它们的工作方式有所不同。

防抖：防抖会延迟事件处理函数的执行，直到事件停止触发一段时间后才会执行。
节流：节流会限制事件处理函数的执行频率，即使事件不断地触发，事件处理函数也只会以一定的时间间隔执行一次。

防抖和节流的比较

下表比较了防抖和节流的异同：

特性	防抖	节流
工作方式	延迟执行	限制频率
执行时机	事件停止触发一段时间后	一定时间间隔
适用场景	用户输入、滚动、调整窗口大小等	动画、视频播放、鼠标移动等

如何使用防抖和节流

在 JavaScript 中，我们可以使用 lodash 等库来实现防抖和节流。

以下是如何使用 lodash 实现防抖的示例：

import debounce from 'lodash.debounce';

const func = () => {
  // 事件处理函数的内容
};

const debouncedFunc = debounce(func, 300);

window.addEventListener('scroll', debouncedFunc);

以上代码中，我们使用 lodash 的 debounce 函数来实现防抖。第一个参数是事件处理函数，第二个参数是延迟时间。这意味着，当滚动事件触发时，事件处理函数不会立即执行，而是延迟 300 毫秒后才执行。如果在 300 毫秒内滚动事件再次触发，那么事件处理函数将不会执行。

以下是如何使用 lodash 实现节流的示例：

import throttle from 'lodash.throttle';

const func = () => {
  // 事件处理函数的内容
};

const throttledFunc = throttle(func, 300);

window.addEventListener('scroll', throttledFunc);

以上代码中，我们使用 lodash 的 throttle 函数来实现节流。第一个参数是事件处理函数，第二个参数是执行时间间隔。这意味着，当滚动事件触发时，事件处理函数不会立即执行，而是每 300 毫秒执行一次。如果在 300 毫秒内滚动事件再次触发，那么事件处理函数将不会执行。