防抖和节流（具体实现函数解析）

防抖 和 节流 是两个常用的 JavaScript 函数优化技巧，它们可以用来提高性能并减少不必要的函数调用。

防抖

防抖 函数会在一定时间内只触发一次，即使在该时间内函数被多次调用。

实现原理

防抖函数通常使用计时器来实现。当函数被调用时，会启动计时器。如果在计时器超时之前函数再次被调用，则会重置计时器。只有在计时器超时之后，函数才会真正执行。

示例

JavaScript

function debounce(func, wait) {
  let timer;

  return function (...args) {
    if (timer) {
      clearTimeout(timer);
    }

    timer = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
}

// 使用示例

const debouncedFunction = debounce(() => {
  // 函数体
}, 1000);

// 在 1000 毫秒内，无论函数被调用多少次，只会执行一次

节流

节流 函数会在一定时间内只执行一次，即使在该时间内函数被多次调用。

实现原理

节流函数通常使用计时器来实现。当函数被调用时，会检查计时器是否正在运行。如果计时器正在运行，则函数不会执行。只有在计时器停止之后，函数才会执行。

示例

JavaScript

function throttle(func, wait) {
  let lastTime = 0;

  return function (...args) {
    const now = Date.now();

    if (now - lastTime >= wait) {
      func.apply(this, args);
      lastTime = now;
    }
  };
}

// 使用示例

const throttledFunction = throttle(() => {
  // 函数体
}, 1000);

// 在 1000 毫秒内，函数只会执行一次

区别

防抖 和 节流 的主要区别在于：

• 防抖 函数会在一定时间内只触发一次，即使在该时间内函数被多次调用。
• 节流 函数会在一定时间内只执行一次，即使在该时间内函数被多次调用。

应用场景

• 防抖 函数通常用于以下场景：
  • 搜索框输入
  • 按钮点击
  • 滚动事件
• 节流 函数通常用于以下场景：
  • 窗口 resize 事件
  • 鼠标移动事件
  • 滚动事件

总结

防抖 和 节流 是两个常用的 JavaScript 函数优化技巧，它们可以用来提高性能并减少不必要的函数调用。选择使用哪个技巧取决于具体的应用场景。

函数会在一定时间内只触发一次 意味着在该时间内，无论函数被调用多少次，它只会执行一次。

函数会在一定时间内只执行一次 意味着在该时间内，函数最多只会执行一次。如果在该时间内函数被多次调用，则只有第一次调用才会执行，后续调用会被忽略。