从手写防抖与节流策略认识编程的艺术

前端

2024-01-26 11:41:18

前言

在前端开发中，我们经常会遇到一些需要对用户输入做出反应的场景。比如，用户在输入框中输入内容时，我们可能需要实时更新搜索结果；用户在滚动页面时，我们可能需要加载更多的内容。为了避免对服务器造成过多的请求，我们需要对这些场景进行优化。

防抖与节流

防抖与节流都是用来优化用户输入响应的策略。它们都可以减少对服务器的请求次数，但它们的工作方式却截然不同。

防抖

防抖策略的核心思想是：如果在一个时间间隔内，某个事件被触发多次，那么只执行一次该事件的回调函数。

防抖策略的实现非常简单，我们可以使用 JavaScript 的 setTimeout() 函数来实现。如下面的代码所示：

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

这个函数接收两个参数：要执行的函数 func 和等待时间 wait。当这个函数被调用时，它会立即清除任何现有的超时计时器，然后创建一个新的超时计时器。如果在这个等待时间内，这个函数再次被调用，那么新的计时器会覆盖旧的计时器，从而防止回调函数被执行。只有当等待时间过去后，回调函数才会被执行。

节流

节流策略的核心思想是：在一个时间间隔内，某个事件最多只执行一次回调函数。

节流策略的实现也比较简单，我们可以使用 JavaScript 的 setInterval() 函数来实现。如下面的代码所示：

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

这个函数接收两个参数：要执行的函数 func 和等待时间 wait。当这个函数被调用时，它会先检查上次回调函数被执行的时间戳 lastCall。如果当前时间 now 与 lastCall 之间的差值大于或等于等待时间 wait，那么回调函数 func 就会被执行，并且 lastCall 会被更新为当前时间。否则，回调函数 func 不会被执行。