防抖与节流：揭开流畅交互的幕后功臣

2023-10-03 15:14:16

前言

随着前端技术的不断发展，网页的交互性和复杂性也在不断提升。然而，在某些情况下，频繁的交互事件可能会导致页面性能下降，出现卡顿或延迟现象。为了解决这个问题，开发者们引入了防抖和节流这两种技术。

防抖与节流的原理

防抖

防抖（debounce）是一种技术，它可以延迟执行函数的调用，直到某个事件停止触发一段时间后才执行。其主要原理是：在事件触发后，先启动一个计时器，如果在计时器结束之前事件再次触发，则重置计时器。这样，函数只会在事件停止触发一段时间后才被调用。

节流

节流（throttle）也是一种延迟执行函数的技术，但它与防抖不同。节流的原理是：在事件触发后，先启动一个计时器，如果在计时器结束之前事件再次触发，则忽略后续的所有触发，直到计时器结束。这样，函数只会在事件触发后的一定时间间隔内被调用。

防抖与节流的应用场景

防抖

防抖通常用于处理用户输入事件，例如文本输入、滚动事件、鼠标移动事件等。在这些场景中，我们希望函数只在用户停止操作一段时间后才执行，以避免频繁的调用导致页面卡顿。

节流

节流通常用于处理连续触发的事件，例如滚动事件、鼠标移动事件、窗口大小改变事件等。在这些场景中，我们希望函数在一定时间间隔内只执行一次，以避免对服务器造成过多的请求或对页面性能造成影响。

防抖与节流的实现

在 JavaScript 中，防抖和节流可以很容易地实现。我们可以使用 setTimeout() 和 clearTimeout() 函数来实现防抖，使用 setInterval() 和 clearInterval() 函数来实现节流。

防抖的实现

// 防抖函数
const debounce = (func, delay) => {
  let timer;
  return (...args) => {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      func.apply(this, args);
      timer = null;
    }, delay);
  };
};

节流的实现

// 节流函数
const throttle = (func, delay) => {
  let lastTime = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastTime >= delay) {
      func.apply(this, args);
      lastTime = now;
    }
  };
};