在 JavaScript 中，节流和防抖是两种常用的优化技术，用于控制函数的执行频率，可以避免过多的重复执行。本文将介绍节流和防抖的原理，并提供一些应用示例。
节流（Throttling）
节流是指控制函数在一定时间内只能执行一次。当触发事件时，函数将被立即执行，然后在指定的时间间隔内不会再被调用。如果在该时间间隔结束之前又触发了事件，函数将被省略执行。
节流的原理很简单，可以通过设置一个定时器来实现。每次触发事件时，都会先清除定时器，然后设置一个新的定时器。如果在指定时间间隔内再次触发事件，就会重新设置定时器，直到事件停止触发。
下面是一个简单的节流函数实现：
function throttle(func, interval) {
let timeout;
return function() {
const context = this;
const args = arguments;
if (!timeout) {
timeout = setTimeout(() => {
timeout = null;
func.apply(context, args);
}, interval);
}
};
}
使用该节流函数可以限制函数在一定时间内只能执行一次，避免重复执行的问题。
防抖（Debouncing）
防抖是指在短时间内连续触发事件时，只执行一次函数。当触发事件时，函数将被延迟执行，如果在延迟结束前又触发了事件，函数将被重新延迟执行，直到事件停止触发。
防抖的原理也很简单，可以通过设置一个定时器来实现。每次触发事件时，都会先清除定时器，然后设置一个新的定时器。如果在延迟结束前再次触发事件，就会重新设置定时器，直到事件停止触发。
下面是一个简单的防抖函数实现：
function debounce(func, delay) {
let timeout;
return function() {
const context = this;
const args = arguments;
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context, args);
}, delay);
};
}
使用该防抖函数可以在连续触发事件时只执行一次函数，避免频繁执行的问题。
应用示例
节流和防抖在实际应用中非常常见，以下是一些常见的应用示例：
1. 浏览器窗口调整
当浏览器窗口改变大小时，触发的 resize 事件可能会非常频繁。通过使用节流或防抖函数，可以确保 resize 事件只在停止调整浏览器窗口大小之后才执行相应的处理函数。
window.addEventListener('resize', throttle(handleResize, 300));
function handleResize() {
// 处理浏览器窗口调整事件
}
2. 输入框搜索建议
当用户在搜索框中输入内容时，可以通过节流或防抖来限制请求建议的频率。只有在用户停止输入一段时间后，才发送请求获取搜索建议。
input.addEventListener('input', debounce(getSearchSuggestions, 300));
function getSearchSuggestions() {
// 发送搜索建议请求
}
3. 滚动事件优化
当滚动页面时，会触发大量的 scroll 事件。通过使用节流或防抖函数，可以限制 scroll 事件的执行频率，提高页面的性能。
window.addEventListener('scroll', throttle(handleScroll, 200));
function handleScroll() {
// 处理页面滚动事件
}
综上所述，JavaScript中的节流和防抖是两种有效的函数执行优化技术。通过合理应用节流和防抖，可以控制函数的执行频率，提高页面性能和用户体验。
本文来自极简博客，作者：魔法学徒喵，转载请注明原文链接：JavaScript中的节流与防抖原理及应用
