掌握防抖和节流的妙诀：从理解到应用，轻松驾驭js事件处理

2023-09-09 00:01:32

优化前端性能：掌握函数防抖和函数节流

简介

在当今繁杂的前端开发世界中，JavaScript 已然成为不可或缺的核心角色。随着应用程序的不断复杂化，前端代码也随之激增，如何优化代码性能已成为开发者们亟待解决的一大难题。函数防抖和函数节流应运而生，它们是优化高频执行 JavaScript 代码的利器，尤其适用于处理浏览器事件。

函数防抖

函数防抖是一种技术，它限制一个函数在指定的时间间隔内只被调用一次。当一个事件被触发时，防抖函数会启动一个计时器。若在此计时器到期前事件再次触发，该计时器将被重置。仅当计时器到期时，函数才会被调用。

防抖函数适用于处理高频事件，例如当用户在输入框中输入时触发的 keyup 事件。如果没有防抖，keyup 事件可能会在短时间内被多次触发，造成不必要的函数调用。而使用了防抖后，keyup 事件仅在用户停止输入一段时间后才会被调用，有效降低了函数调用的频率，提升了性能。

函数节流

函数节流也是一种限制函数调用频率的技术，但与防抖不同，节流函数在给定的时间间隔内只允许函数被调用一次。这意味着，无论事件在该时间间隔内被触发多少次，函数只会被调用一次。

函数节流适用于处理持续不断触发的事件，例如滚动事件或鼠标移动事件。如果没有节流，这些事件可能会在短时间内被多次触发，导致不必要的函数调用。而使用了节流后，这些事件仅在指定的时间间隔内会被处理一次，同样减少了函数调用的次数，提升了性能。

函数防抖与函数节流的区别

尽管函数防抖和函数节流都旨在优化高频执行的 JavaScript 代码，但它们的工作原理和应用场景有所不同：

函数防抖： 限制函数在指定的时间间隔内只被调用一次。
函数节流： 限制函数在指定的时间间隔内只允许被调用一次。

函数防抖适用于处理高频事件，例如用户输入时的 keyup 事件；而函数节流适用于处理持续不断触发的事件，例如滚动事件或鼠标移动事件。

实现示例

函数防抖和函数节流可以使用 JavaScript 实现。以下是一些简单的示例：

// 函数防抖
function debounce(func, wait) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(context, args);
    }, wait);
  };
}

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