跟着 Underscore.js 学防抖：优化前端事件处理

2023-12-19 12:26:34

在前端开发中，事件处理是一个至关重要的部分。我们经常需要监听各种事件，例如窗口大小改变、表单输入值变化等。然而，当这些事件过于频繁地触发时，可能会对页面性能造成严重影响，特别是当事件处理回调函数涉及到昂贵的操作，例如网络请求或复杂的计算时。

为了解决这个问题，我们可以使用防抖 (Debounce) 技术。防抖是一个延迟函数执行的技巧，它允许我们指定一个时间间隔，在该时间间隔内，如果事件再次触发，则取消前一次的执行并重新开始计时。这样，我们可以有效地避免在短时间内重复执行相同的操作。

在 JavaScript 中，实现防抖的常用方法是使用 Underscore.js 库。Underscore.js 提供了一个名为 _.debounce 的函数，它可以方便地实现防抖。

Underscore.js 中的防抖

_.debounce 函数的语法如下：

_.debounce(func, wait, [immediate])

func: 需要防抖的函数。
wait: 等待时间（毫秒）。
immediate: 是否立即执行函数（可选）。

_.debounce 函数的工作原理如下：

当第一次调用 _.debounce 时，它会创建一个定时器，延迟 wait 毫秒后执行函数 func。
如果在 wait 毫秒内再次调用 _.debounce，则会取消前一个定时器并重新开始计时。
只有当 wait 毫秒内没有再调用 _.debounce 时，才会执行函数 func。

immediate 参数可选，默认为 false。如果将其设置为 true，则会在创建定时器后立即执行函数 func 一次。

使用 Underscore.js 实现防抖

以下是一个使用 Underscore.js 实现防抖的示例：

// 定义需要防抖的函数
function myFunction() {
  console.log('执行 myFunction');
}

// 使用 Underscore.js 实现防抖
const debouncedFunction = _.debounce(myFunction, 500);

// 监听窗口大小改变事件
window.addEventListener('resize', debouncedFunction);