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(); //只会输出两次“执行”

总结：

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