js的节流和防抖详解

防抖和节流是JavaScript中的常见优化技巧，它们可以帮助我们控制代码在特定的时间间隔内执行的频率，从而优化性能。下面详细讲解它们的原理和使用方法。

防抖（Debounce）：

防抖的原理是当一个事件频繁触发时，只有在停止触发一段时间后，才会执行相应的代码。比如用户在输入框中连续输入，我们不必要每次都去响应用户的输入，而是在用户停止输入一段时间后再去响应。

防抖的实现方法很简单，通过设置一个定时器，来延迟执行函数。如果在定时器执行之前，又触发了该事件，就取消定时器，并重新设置一个新的定时器。

使用示例：

function debounce(func, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  }
}
 
const debouncedFunc = debounce(() => {console.log('执行');}, 1000);
debouncedFunc();
debouncedFunc();
debouncedFunc(); //只会输出一次“执行”

节流（Throttle）:

节流的原理是当一个事件频繁触发时，只会在特定的时间间隔内执行一次相应的代码。比如在滚动页面的时候，我们不必要每次都去响应滚动事件，而是在特定的时间间隔内去响应。

节流的实现方法也很简单，在每次执行代码之前，先判断当前时间间隔是否达到了预设的时间间隔，如果达到了，就执行相应的代码，并重新设置计时器；如果没达到，就忽略这次触发。

使用示例：

function throttle(func, delay) {
  let timer;
  let lastTime = 0;
  return function() {
    const currentTime = new Date().getTime();
    if (currentTime - lastTime >= delay) {
      lastTime = currentTime;
      func.apply(this, arguments);
    } else {
      clearTimeout(timer);
      timer = setTimeout(() => {
        lastTime = currentTime;
        func.apply(this, arguments);
      }, delay - (currentTime - lastTime));
    }
  }
}
 
const throttledFunc = throttle(() => {console.log('执行');}, 1000);
throttledFunc();
throttledFunc();
throttledFunc(); //只会输出两次“执行”

总结：

防抖和节流都是常见的优化技巧，它们能控制代码的执行频率，优化性能，提高用户体验。需要根据具体的场景选择使用哪一种技巧。