防抖（Debounce）和节流（Throttle）是 JavaScript 中两种常见的性能优化技术，用于控制函数在一定时间内的执行频率。它们的核心目的是减少高频触发事件（如滚动、输入、窗口调整等）带来的性能问题，但它们的实现方式和适用场景有所不同。

1.防抖（Debounce）

防抖的核心思想是：在事件被触发后，等待一段时间再执行函数。如果在这段时间内事件再次被触发，则重新计时。

适用场景

• 输入框实时搜索（等待用户停止输入后再发送请求）。
• 窗口大小调整（等待用户停止调整后再计算布局）。
• 按钮点击防止重复提交。

实现原理

• 设置一个定时器，延迟执行函数。
• 如果在延迟时间内事件再次触发，则清除之前的定时器并重新计时。

代码实现

function debounce(func, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer); // 清除之前的定时器
    timer = setTimeout(() => {
      func.apply(this, args); // 延迟执行
    }, delay);
  };
}

// 示例：输入框防抖
const input = document.querySelector('input');
input.addEventListener('input', debounce(() => {
  console.log('Input value:', input.value);
}, 300));

2.节流（Throttle）

节流的核心思想是：在一定时间间隔内，函数最多执行一次。无论事件触发多少次，函数都会按照固定的时间间隔执行。

适用场景

• 滚动事件（每隔一段时间检查滚动位置）。
• 鼠标移动事件（每隔一段时间更新鼠标位置）。
• 游戏中的按键操作（限制操作频率）。

实现原理

• 设置一个标志位（或时间戳），记录上一次函数执行的时间。
• 如果当前时间与上一次执行时间的间隔大于设定的时间，则执行函数并更新标志位。

代码实现

function throttle(func, delay) {
  let lastTime = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastTime >= delay) {
      func.apply(this, args); // 执行函数
      lastTime = now; // 更新上一次执行时间
    }
  };
}

// 示例：滚动事件节流
window.addEventListener('scroll', throttle(() => {
  console.log('Scrolling...');
}, 300));

3.防抖和节流的区别

4.结合防抖和节流

在某些场景下，可能需要结合防抖和节流的特性。例如，在滚动事件中，可以先使用节流确保函数按固定频率执行，再使用防抖确保在滚动停止后执行一次。

示例代码

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

function throttle(func, delay) {
  let lastTime = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastTime >= delay) {
      func.apply(this, args);
      lastTime = now;
    }
  };
}

// 结合防抖和节流
const combined = throttle(debounce(() => {
  console.log('Combined debounce and throttle');
}, 300), 100);

window.addEventListener('scroll', combined);

5.总结

• 防抖：适合处理事件停止后的操作，例如输入框搜索。
• 节流：适合处理高频触发但需要按固定频率执行的操作，例如滚动事件。
• 根据具体场景选择合适的优化技术，可以有效提升性能和用户体验。