揭秘 JavaScript 防抖与节流：从原理到实践的完全指南

2023-10-25 01:24:10

JavaScript 防抖和节流是优化前端应用性能的重要技术。它们能有效减少高频率事件触发对系统资源的压力，提升用户体验。本文将深入探讨这两种技术的工作机制、实现方式及应用场景。

防抖（Debounce）的基本概念与原理

防抖是指在一定时间间隔内只执行一次操作。当连续调用某个函数时，只有最后一次操作会生效，且这个操作会在指定的时间后才被执行。这样可以防止频繁触发同一事件带来的资源浪费。

实现防抖的代码示例

function debounce(func, wait) {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, arguments), wait);
  };
}

// 使用示例：防抖函数用于滚动事件优化
window.addEventListener('scroll', debounce(function(event) {
  console.log("Scroll event debounced");
}, 200));

这段代码中，debounce 函数接收两个参数——要执行的函数 func 和等待时间 wait。每次调用返回的新函数时，都会清除之前的定时器并设置一个新的，在 wait 时间后才真正执行传入的函数。

节流（Throttle）的基本概念与原理

节流是指在一定时间段内限制某个函数只能执行一次。如果在这个时间窗口内再次触发事件，则会忽略后续调用，直到下一个时间窗口开始。

实现节流的代码示例

function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return function() {
    const context = this;
    const args = arguments;
    if (!lastRan) {
      func.apply(context, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(function() {
        if ((Date.now() - lastRan) >= limit) {
          func.apply(context, args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  };
}

// 使用示例：节流函数用于输入事件优化
document.getElementById('input').addEventListener('input', throttle(function(event) {
  console.log("Input event throttled");
}, 500));