手写防抖、节流，防抖和节流的区别？

八股文_JavaScript面试题 0 79

参考回答

防抖（Debouncing） 和 节流（Throttling） 都是用来限制频繁触发事件的技术，尤其是对频繁触发的事件如 scroll、resize、keypress 等进行优化。它们的目标是提升性能，减少不必要的计算和请求。

防抖：确保事件在一定时间内只触发一次。如果在规定的时间内再次触发事件，计时器会被清除并重新开始。常用于用户输入、按钮点击等场景。
节流：限制一个时间周期内事件的执行次数，不管事件触发的频率有多高。常用于滚动、窗口大小调整等场景。

详细讲解与拓展

1. 防抖（Debounce）

防抖的基本思想是：只有当事件触发后一定时间内没有再触发时，才会执行某个操作。如果在这段时间内事件再次触发，计时器会被重置，直到事件停止触发一段时间才会执行。

防抖的实现：

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

// 使用示例
const handleInput = debounce(function(event) {
  console.log('Input value:', event.target.value);
}, 500);

document.getElementById('input').addEventListener('input', handleInput);

在这个例子中，debounce 函数返回一个新的函数，只有在输入停止 500 毫秒后才会执行回调 handleInput，避免了输入过程中每次输入都触发回调。

2. 节流（Throttle）

节流的基本思想是：在指定时间内，无论事件触发多少次，都会按照一定的频率执行某个操作。常见的应用场景是滚动事件、页面的 resize 事件等。

节流的实现：

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

// 使用示例
const handleScroll = throttle(function(event) {
  console.log('Scroll event triggered!');
}, 1000);

window.addEventListener('scroll', handleScroll);

在这个例子中，throttle 函数返回一个新的函数，确保在 1000 毫秒内只会执行一次 handleScroll，即使用户快速滚动也不会频繁触发回调。

3. 防抖与节流的区别

特性	防抖（Debounce）	节流（Throttle）
触发条件	事件停止触发后才执行回调，最后一次触发才执行。	固定时间间隔内只执行一次，不管事件触发多少次。
适用场景	用于防止重复触发的场景，如输入框实时搜索、按钮点击等。	用于控制高频触发的事件，如滚动、窗口大小调整、鼠标移动等。
行为	只在最后一次事件发生后的延迟时间内触发一次。	在每次触发事件时都会执行，且执行的频率受限于指定的时间间隔。
使用方式	一般用于处理像搜索框输入等用户行为较慢、间隔较长的场景。	一般用于处理页面滚动、resize 等持续触发的事件。

4. 总结

防抖适合用户行为较为间隔的场景，避免多次重复执行操作。
节流适合高频率触发的场景，确保操作不会过于频繁地执行。

两者都能有效提高性能，减少不必要的操作，开发者根据具体场景选择合适的技术。