掌控前端优化利器，事件节流防抖

前端

2024-01-04 04:05:03

事件节流与防抖：提高前端事件处理性能

前言

在前端开发中，事件处理是一个至关重要的环节。当用户与页面交互时，我们需要注册事件监听器，以响应各种各样的动作。然而，当事件触发过于频繁时，就会对页面性能造成影响。例如，滚动事件的频繁触发会导致页面卡顿。

为了解决这个问题，前端开发人员发明了事件节流 和事件防抖 技术。本文将深入探讨这两种技术的原理、实现方式以及使用场景。

事件节流

目的

事件节流旨在降低事件触发的频率，避免对性能造成影响。它适用于那些不需要频繁触发的事件，如滚动事件、resize事件等。

原理

事件节流通过使用定时器来限制事件的触发频率。当事件被触发时，它会开启一个定时器，并在指定时间间隔后执行事件处理函数。如果在定时器期间事件再次触发，则会取消之前的定时器，重新开启一个新的定时器。这样一来，事件的触发频率就会被限制在规定的时间间隔内。

实现

function throttle(fn, delay) {
  let timer = null;
  return function () {
    let context = this;
    let args = arguments;
    if (!timer) {
      timer = setTimeout(() => {
        fn.apply(context, args);
        timer = null;
      }, delay);
    }
  };
}

示例

window.addEventListener("scroll", throttle(function () {
  // 滚动事件处理函数
}, 200));

在上面的示例中，滚动事件的触发频率被限制在200毫秒一次。

事件防抖

目的

事件防抖旨在只执行一次事件处理函数，当事件在一定时间内连续触发时。它适用于那些只需要在事件停止触发后才执行的事件，如输入框的输入事件、点击事件等。

原理

事件防抖同样使用定时器。当事件被触发时，它会开启一个定时器。如果在定时器期间事件再次触发，则会取消之前的定时器，重新开启一个新的定时器。这样一来，只有在事件停止触发一段时间后，定时器才会执行事件处理函数。

实现

function debounce(fn, delay) {
  let timer = null;
  return function () {
    let context = this;
    let args = arguments;
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(context, args);
    }, delay);
  };
}

示例

input.addEventListener("input", debounce(function () {
  // 输入事件处理函数
}, 500));

在上面的示例中，输入事件的触发频率被限制在500毫秒一次。

事件节流与事件防抖的异同

特性	事件节流	事件防抖
目的	降低事件触发频率	只执行一次事件处理函数
适用场景	不需要频繁触发的事件	只需要在事件停止触发后才执行的事件
实现方式	使用定时器	使用定时器