JavaScript 防抖函数实现详解及应用场景

防抖函数的作用是在事件被触发 n 秒后再执行回调函数，如果在这 n 秒内又触发了该事件，则重新计时。

下面是一个简单的防抖函数实现：

function debounce(func, delay) {
  let timer = null;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  };
}

这个函数接受两个参数：

• func：要执行的回调函数
• delay：防抖延迟的时间

它返回一个新的函数，使用了闭包保存了 timer 变量，用于记录延迟的时间。

每次调用这个函数时，它会清除之前的 timer，然后重新设置一个新的，延迟 delay 秒后执行回调函数。如果在这段时间内又调用了该函数，则重新计时，直到延迟时间结束才执行回调函数。

防抖函数的应用场景

防抖函数在实际开发中有很多应用场景，例如：

• 搜索框输入提示：用户在搜索框中输入内容时，每次按键都会触发一次搜索，但我们希望只有用户停止输入一段时间后才进行搜索，以避免频繁请求导致的性能问题。
• 窗口大小改变事件：窗口大小改变时，我们可能需要重新调整页面布局，但频繁调整会影响性能。可以使用防抖函数，只有窗口大小稳定一段时间后才进行调整。
• 滚动事件：页面滚动时，我们可能需要加载更多内容，但频繁加载会影响用户体验。可以使用防抖函数，只有用户停止滚动一段时间后才加载更多内容。

防抖函数的优点

使用防抖函数可以带来以下优点：

• 提升性能：避免事件频繁触发导致的性能问题。
• 改善用户体验：提供更流畅的交互体验。
• 减少资源消耗：例如，减少网络请求次数。

总结

防抖函数是 JavaScript 开发中一个非常实用的技巧，可以有效提升代码性能和用户体验。在实际开发中，我们可以根据不同的场景选择合适的防抖函数实现方式。