化繁为简，轻松理解防抖和节流！

前端

2023-11-05 08:12:23

防抖和节流，对于提高Web应用响应速度来说，无疑是两把利器。今天，我们就从最基础的防抖和节流入手，逐步深入探究它们的奥秘！

防抖和节流，乍一听可能有点陌生，但如果你经常与Web开发打交道，就一定不会对它们感到陌生。它们都是用来优化Web应用程序性能的实用技巧。

什么是防抖？

防抖就像是在给你的电脑安装了一个“刹车”，它可以延缓函数的执行，直到你停止触发它为止。举个例子，当你在搜索框中输入文字时，防抖可以防止搜索结果频繁刷新，避免不必要的服务器请求。

什么是节流？

节流有点类似于防抖，但它不是延缓函数的执行，而是限制它在一定时间内只能执行一次。比如，当你连续点击一个按钮时，节流可以确保这个按钮只响应一次点击，避免重复操作导致的问题。

防抖和节流的底层原理

防抖和节流的实现原理都是基于JavaScript的计时器。防抖通过设置一个计时器，当函数触发时，会重新设置计时器。如果在计时器过期之前函数再次被触发，则会取消前一次计时器，并重新设置一个新的计时器。这样，函数只有在触发后计时器过期时才会真正执行。

节流则使用了一个不同的计时器机制。它会在函数第一次被触发时设置一个计时器。当函数再次被触发时，如果计时器还未过期，则函数不会执行。只有在计时器过期后，函数才会执行，并且再次设置一个新的计时器。

如何在实践中应用防抖和节流？

防抖和节流的应用场景非常广泛。比如：

防抖： 搜索框输入、滚动事件监听、窗口大小调整事件监听。
节流： 按钮点击事件、鼠标移动事件监听、页面滚动事件监听。

使用JavaScript实现防抖和节流

在JavaScript中实现防抖和节流非常简单。以下是一个防抖函数的示例：

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

以下是节流函数的示例：

function throttle(func, delay) {
  let lastCall = 0;
  return function (...args) {
    const now = new Date().getTime();
    if (now - lastCall < delay) return;
    lastCall = now;
    func.apply(this, args);
  };
}