防抖和节流：在 JavaScript 中优化事件处理

前端

2024-02-26 00:18:14

提升应用性能：利用防抖和节流优化事件处理

前言

在当今飞速发展的网络应用世界中，处理用户输入事件至关重要。然而，频繁的事件触发可能给应用程序性能带来负面影响。防抖和节流技术的出现为我们提供了有效应对这一挑战的解决方案。

防抖：防止频繁调用

什么是防抖？

防抖是一种技术，它延迟执行一个函数，直到经过指定的时间段后才执行。想象一下，你正在搜索框中输入内容，防抖可以防止在你键入每个字符时都发出搜索请求，避免不必要的服务器调用。

如何使用防抖？

使用防抖很简单，我们只需要指定一个待执行的函数以及延迟时间。当事件触发时，防抖函数会推迟函数执行，直到指定时间段结束。在此期间，如果再次触发事件，防抖函数会重新开始计时，确保仅在最后一个事件触发后执行函数。

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

节流：限制执行频率

什么是节流？

节流是一种技术，它限制函数在指定的时间段内只能执行一次。这对于防止密集型任务或与后台服务器交互时函数被频繁调用非常有用。例如，我们可以使用节流来限制用户快速滚动时触发滚动事件的频率。

如何使用节流？

使用节流与防抖类似，但我们需要一个额外的跟踪变量来记录上次函数执行的时间。当事件触发时，节流函数会检查上次函数执行的时间，如果当前时间距离上次执行时间超过了指定时间段，则函数将被执行。

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