巧用 JavaScript 实现防抖、节流：提升前端性能！

前端

2023-11-26 08:17:29

在这个瞬息万变的网络世界，用户体验至关重要。如果您的网站或应用程序响应迟缓，用户可能会失去耐心并转向其他地方。防止此类情况发生的一种方法是使用防抖和节流技术。

防抖和节流是 JavaScript 中用于提高前端性能的两项重要技术。让我们深入了解它们的含义、作用以及如何使用它们来优化您的应用程序。

防抖

防抖（debounce）函数是一种用于限制函数在给定的时间间隔内只被调用一次的技术。它对于处理频繁触发事件（例如输入字段的键入事件或滚动事件）非常有用。

使用场景：

搜索框：当用户在搜索框中键入时，防抖函数可防止多次触发搜索请求，从而提高性能并提供更流畅的体验。
无限滚动：防抖函数可确保在滚动事件触发时，只在一定时间间隔内发送一次请求，从而避免不必要的服务器请求。

如何实现：

以下是一个实现防抖函数的示例代码：

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

节流

节流（throttle）函数与防抖函数类似，但它限制函数在给定的时间间隔内只被调用一次，即使在此期间发生了多次触发事件。

使用场景：

调整窗口大小：当用户调整浏览器窗口大小时，节流函数可防止窗口大小事件过于频繁地触发，从而提高性能。
鼠标移动跟踪：节流函数可确保鼠标移动事件在一定时间间隔内只被触发一次，从而防止不必要的处理和资源消耗。

如何实现：

以下是一个实现节流函数的示例代码：

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