深入解析防抖节流函数，化繁为简，轻松掌握
2023-10-28 22:40:18
前言
在前端开发中，我们经常会遇到需要在用户操作后触发某个函数的情况。比如，在输入框中输入文字时，我们需要实时更新显示结果；在页面滚动时，我们需要加载更多内容。这些场景中，如果我们直接在事件监听器中调用函数，可能会导致函数被频繁调用，从而影响程序性能。
为了解决这个问题，我们可以使用防抖节流函数来优化函数的调用。防抖节流函数可以控制函数的调用频率，确保函数不会被频繁调用，从而提高程序性能。
防抖函数
防抖函数（debounce）可以确保函数在一段时间内只会被调用一次。如果在规定的时间间隔内函数被多次触发，只有最后一次触发才会真正执行函数。
防抖函数的实现原理很简单，我们可以使用一个定时器来控制函数的调用。当函数被触发时，我们先启动一个定时器，如果在定时器到期之前函数又被触发，我们就重新启动定时器，这样就保证了函数在一段时间内只会被调用一次。
function debounce(func, wait) {
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(this, args);
}, wait);
};
}
这个防抖函数接受两个参数：func是要被防抖的函数，wait是防抖的时间间隔。
使用防抖函数非常简单，只需要将原来的函数包装一层防抖函数即可。
const debouncedFunction = debounce(myFunction, 500);
document.addEventListener('input', debouncedFunction);
在这个例子中，我们把myFunction防抖了500毫秒，也就是说，当用户在输入框中输入文字时，myFunction只会在用户停止输入500毫秒后才会被调用。
节流函数
节流函数（throttle）可以确保函数在一段时间内只会被调用一次，但是与防抖函数不同的是，节流函数会在一段时间内只允许函数执行一次，即使函数被多次触发。
节流函数的实现原理也比较简单，我们可以使用一个时间戳来控制函数的调用。当函数被触发时，我们先检查一下距离上次函数被调用已经过去了多少时间，如果已经超过了规定的时间间隔，我们就执行函数，否则我们就忽略这次触发。
function throttle(func, wait) {
let lastCallTime = 0;
return function(...args) {
const now = Date.now();
if (now - lastCallTime >= wait) {
func.apply(this, args);
lastCallTime = now;
}
};
}
这个节流函数接受两个参数：func是要被节流的函数，wait是节流的时间间隔。
使用节流函数也非常简单，只需要将原来的函数包装一层节流函数即可。
const throttledFunction = throttle(myFunction, 500);
document.addEventListener('scroll', throttledFunction);
在这个例子中，我们把myFunction节流了500毫秒，也就是说，当用户在页面滚动时，myFunction只会在用户停止滚动500毫秒后才会被调用。
防抖函数和节流函数的区别
防抖函数和节流函数都是用来控制函数调用频率的函数优化技巧，但是它们的区别在于：
- 防抖函数确保函数在一段时间内只会被调用一次，而节流函数确保函数在一段时间内只会被调用一次。
- 防抖函数会在一段时间内忽略函数的多次触发，而节流函数会在一段时间内只允许函数执行一次。
总结
防抖节流函数是JavaScript中常用的函数优化技巧，可以有效减少不必要的函数调用，提高程序性能。本文详细介绍了防抖函数和节流函数的原理和用法，希望对您有所帮助。
