在 Web 开发中，我们经常会遇到一些需要频繁触发的事件，比如滚动事件、窗口大小调整事件等。而如果每次触发事件都立即执行相应的操作，可能会导致性能问题。针对这种情况，JavaScript 提供了函数节流（Throttle）和防抖（Debounce）技术，可以帮助我们优化性能并提升用户体验。
什么是函数节流（Throttle）
函数节流指的是在一定时间间隔内只执行一次函数。当用户频繁触发函数时，只会在设定的时间间隔后执行一次。这样可以降低函数调用的频率，提高代码运行效率。
什么是函数防抖（Debounce）
函数防抖指的是在事件触发后，等待一段时间后再执行函数。如果在等待时间内再次触发了事件，则重新计时。这样可以确保在事件触发时不会频繁地执行函数，避免无效操作和资源浪费。
函数节流的实现
函数节流的实现有多种方式，下面是其中一种常用的实现方法：
function throttle(func, wait) {
let timeout;
return function () {
if (!timeout) {
timeout = setTimeout(() => {
func.apply(this, arguments);
timeout = null;
}, wait);
}
};
}
在这个实现中，首先定义了一个 timeout 变量用于存储定时器的 ID。在函数被触发时，会判断 timeout 变量的值。如果为假（即定时器不存在），则创建一个新的定时器，并在指定的时间间隔后执行函数。在函数执行完后，将 timeout 置为 null，这样下一次触发函数时才会再次创建定时器。
函数防抖的实现
函数防抖的实现方式和函数节流类似，下面是一种常用的实现方法：
function debounce(func, wait) {
let timeout;
return function () {
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(this, arguments);
}, wait);
};
}
在这个实现中，每次触发函数时，都会先清除之前的定时器（如果存在），然后再创建一个新的定时器。在等待时间结束后，执行函数。
应用场景
函数节流和防抖可以应用于多种场景中，例如：
- 滚动事件：当用户滚动页面时触发某些操作，通过函数节流和防抖可以限制函数的执行频率，提高性能。
- 输入框校验：根据用户输入的内容进行校验时，通过函数节流和防抖可以减少校验操作的频率，提高用户体验。
- 窗口大小调整事件：当用户调整窗口大小时触发某些操作，通过函数节流和防抖可以避免频繁地执行操作，提高页面性能。
总结
函数节流和防抖是一种优化性能的常用技术，通过限制函数的执行频率，可以降低资源的消耗，提升代码的运行效率。它们在实际开发中有着广泛的应用场景，可以有效地提升用户体验和页面性能。
希望本文对你理解和应用 JavaScript 函数节流和防抖技术有所帮助！
本文来自极简博客，作者：微笑绽放，转载请注明原文链接：JavaScript 函数节流与防抖技术解析
