防抖和节流的区别
防抖（Debounce）和节流（Throttle）都是用于控制函数执行频率的技术，它们主要用于优化在浏览器中频繁触发的事件（如窗口大小调整、滚动、鼠标移动、按键按下等），但它们的工作方式有所不同。
防抖（Debounce）
- 定义：防抖是指在事件被触发后，延迟一定时间后才执行回调函数，如果在这个延迟时间内事件又被触发，则重新计算延迟时间。简单来说，只有当经过一段规定的时间后没有再次触发这个事件，才会执行对应的函数。
- 示例场景：
- 搜索框的输入联想功能。当用户在搜索框中输入内容时，你可能希望在用户停止输入一段时间（例如 500 毫秒）后才发送请求获取联想建议。如果用户一直在输入，那么就不断重新计算延迟时间，直到用户停止输入达到规定的时间后才执行获取联想建议的函数。
- 窗口大小调整时重新布局的功能。只有当用户停止调整窗口大小一段时间后，才重新计算布局，避免在调整过程中频繁地重新布局，浪费性能。
- 代码示例（使用 JavaScript）：
function debounce(func, delay) {
let timer;
return function() {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
func.apply(this, arguments);
timer = null;
}, delay);
};
}
// 假设这是一个需要防抖的函数，例如处理窗口大小调整后的布局更新
function handleResize() {
console.log("窗口大小调整后的布局更新");
}
// 创建防抖后的函数
const debouncedHandleResize = debounce(handleResize, 300);
// 当窗口大小改变时调用防抖后的函数
window.addEventListener('resize', debouncedHandleResize);
在上述代码中，debounce函数返回一个新的函数。每次触发事件时（这里是window的resize事件），如果之前设置的定时器还存在，就清除它，然后重新设置新的定时器。只有当定时器计时结束（300 毫秒内没有再次触发resize事件），才会执行handleResize函数。
节流（Throttle）
- 定义：节流是指在一定时间间隔内，不管事件触发多少次，只会执行一次函数。也就是说，函数的执行频率是固定的，按照一定的时间周期来执行。
- 示例场景：
- 滚动加载更多内容的功能。当用户滚动页面时，为了避免频繁地发送加载请求，可以设置一个节流函数，使得每间隔一段时间（例如 2 秒）才发送一次加载更多内容的请求，这样可以防止大量不必要的请求，同时也能保证用户在滚动过程中能够加载到新的内容。
- 鼠标连续点击按钮触发某个操作，比如游戏中的射击按钮。为了避免玩家过快地连续点击导致游戏逻辑出现问题，可以设置节流，让射击操作按照一定的频率（如每秒射击一次）来执行。
- 代码示例（使用 JavaScript）：
function throttle(func, delay) {
let timer = null;
return function() {
if (!timer) {
func.apply(this, arguments);
timer = setTimeout(() => {
timer = null;
}, delay);
}
};
}
// 假设这是一个需要节流的函数，例如滚动加载更多内容
function loadMore() {
console.log("加载更多内容");
}
// 创建节流后的函数
const throttledLoadMore = throttle(loadMore, 2000);
// 当页面滚动时调用节流后的函数
window.addEventListener('scroll', throttledLoadMore);
在这个代码中，throttle函数返回的新函数在每次被调用时，首先检查是否已经有定时器在运行。如果没有定时器（意味着距离上次执行函数已经过去了规定的延迟时间），就执行loadMore函数，然后设置一个新的定时器。在定时器未结束（2000 毫秒内）再次触发事件时，函数不会执行，直到定时器结束，才可以再次执行。
总结区别
- 执行次数：
- 防抖：在事件停止触发后的延迟时间内只执行一次，如果事件一直触发，可能永远不会执行，直到事件停止触发一段时间后才会执行。
- 节流：在固定的时间间隔内一定会执行一次，不管事件触发多么频繁。
- 应用场景侧重点：
- 防抖：更侧重于处理连续的事件触发，并且希望只在最后一次触发后的延迟时间后执行一次操作，例如用户输入完成后的操作或者窗口大小调整完成后的操作。
- 节流：主要用于控制在一段时间内频繁触发的事件的执行频率，保证函数按照一定的节奏执行，例如滚动加载或者频繁的按钮点击操作。