掌握手写防抖和节流，提升代码质量

前端

2024-01-08 13:03:12

优化事件处理：掌握手写防抖和节流的艺术

在瞬息万变的数字世界中，编写高效、响应迅速的代码至关重要。想象一下，你在开发一个搜索输入框，希望在用户停止输入后才执行搜索查询。如果不采取任何措施，每次按键都会触发一次搜索查询，导致不必要的网络请求和性能下降。

为了解决这个问题，我们引入了两种强大的技术：防抖和节流。它们可以优化事件处理，防止不必要的函数调用和性能下降。在这篇博文中，我们将深入探讨这两种技术，并提供一份动手实践指南，让你在短短 7 分钟内掌握手写防抖和节流。

揭秘防抖和节流

防抖

防抖是一种技术，它可以抑制函数的连续调用，直到事件触发后的一段时间（即等待时间）内不再有调用为止。换句话说，它会延迟函数的执行，直到事件停止触发指定的时间间隔。

节流

节流与防抖类似，但它以不同的方式抑制函数调用。节流会限制函数在给定的时间间隔内只能被调用一次。这意味着，无论用户如何频繁地触发事件，函数都只会在指定的时间间隔内执行一次。

何时使用防抖和节流

防抖适用于以下场景：

你希望在事件触发后执行函数，但只有在事件停止触发一段时间后才需要执行。
例子：搜索输入框中的搜索查询、滚动事件中的页面加载或调整窗口大小事件中的重新渲染。

节流适用于以下场景：

你希望限制函数在给定的时间间隔内只能被调用一次，即使事件被频繁触发。
例子：游戏中的每秒帧数限制、视频播放中的缓冲或滚动事件中的延迟加载。

手写防抖和节流实现

以下是使用 JavaScript 手写防抖和节流的示例代码：

防抖

const debounce = (func, wait) => {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
};

节流

const throttle = (func, wait) => {
  let lastCall = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastCall > wait) {
      func.apply(this, args);
      lastCall = now;
    }
  };
};