介绍
防抖（Debouncing）和节流（Throttling）是两种常见的优化高频触发事件的技术，它们都可以减少事件处理的次数，提高页面性能和用户体验。它们的主要区别在于触发事件的执行次数和时间间隔的不同。
防抖
防抖是指在事件触发后，延迟一段时间再执行处理函数，如果在这段时间内再次触发该事件，就重新开始计时。例如，在搜索框中输入关键字时，我们希望在用户停止输入一段时间后再触发搜索事件，这时就可以使用防抖技术。防抖的作用是避免事件处理函数被频繁调用，减少不必要的计算和网络请求。
使用场景
- 搜索框：在搜索框中输入关键字时，我们希望在用户停止输入一段时间后再触发搜索事件，这时就可以使用防抖技术。
- 窗口调整：当窗口大小调整时，触发
resize事件，如果使用防抖技术，在调整大小的过程中不会频繁地触发处理函数，可以避免不必要的计算和操作。 - 按钮点击：一些重要的操作，比如提交表单、支付等，需要防止用户多次点击按钮，使用防抖函数可以确保只执行一次操作。
代码示例
function debounce(func, delay) {
let timerId;
return function(...args) {
if (timerId) {
clearTimeout(timerId);
}
timerId = setTimeout(() => {
func.apply(this, args);
timerId = null;
}, delay);
};
}
节流
节流是指在一段时间内只执行一次事件处理函数，无论事件触发了多少次。例如，在滚动页面时，我们希望在一定时间内只执行一次滚动事件，这时就可以使用节流技术。节流的作用是控制事件处理函数的执行频率，避免事件处理函数被过多地调用，减少计算和网络请求。
使用场景
- 滚动事件：在滚动页面时，我们希望在一定时间内只执行一次滚动事件，这时就可以使用节流技术，减少事件处理函数被过多地调用，提高页面性能。
- 鼠标移动：当鼠标移动时，触发
mousemove事件，如果使用节流技术，在一定时间内只执行一次处理函数，可以避免事件处理函数被频繁调用，减少不必要的计算和操作。 - 定时器：在定时器的应用中，我们希望在一定时间内只执行一次处理函数，这时就可以使用节流技术，避免定时器重复触发事件处理函数。
- 网络请求：在一定时间内只发送一次网络请求，避免请求次数过多。
代码示例
function throttle(func, delay) {
let timerId;
return function(...args) {
if (!timerId) {
timerId = setTimeout(() => {
func.apply(this, args);
timerId = null;
}, delay);
}
};
}
总结
总的来说，防抖和节流都是优化高频触发事件的常见技术，它们的主要区别在于触发事件的执行次数和时间间隔的不同。防抖用于在事件停止后延迟执行处理函数，节流用于在一段时间内只执行一次处理函数。在实际应用中，我们需要根据具体的场景来选择合适的技术来优化事件处理。
