JavaScript 中的防抖和节流：优化事件处理程序性能

前端

2024-02-03 12:08:33

JavaScript 中的防抖和节流

引言

在 JavaScript 中，频繁触发事件处理函数可能会对浏览器性能产生负面影响，从而导致糟糕的用户体验。为了解决这个问题，可以使用防抖和节流技术来优化事件处理程序的调用频率。

防抖

防抖通过抑制事件处理函数的执行来优化性能。其工作原理如下：

时间间隔： 指定一个时间间隔，例如 500 毫秒。
事件触发： 当事件被触发时，开始一个计时器。
计时器到期： 如果在计时器到期之前没有再次触发事件，则执行处理函数。

代码示例：

function debounce(fn, delay) {
  let timerId;
  return function () {
    if (timerId) {
      clearTimeout(timerId);
    }
    timerId = setTimeout(fn, delay);
  };
}

节流

节流通过限制事件处理函数的调用频率来优化性能。其工作原理如下：

时间间隔： 指定一个时间间隔，例如 100 毫秒。
事件触发： 当事件被触发时，检查前一次调用是否在指定时间间隔内。
时间间隔已过： 如果前一次调用不在指定时间间隔内，则执行处理函数。

代码示例：

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