防抖和节流使用场景

防抖（Debounce）和节流（Throttle）是两种常用的性能优化技术，用于限制某些高频率执行的函数的调用次数，从而优化性能和用户体验。它们的主要区别在于控制函数执行频率的策略不同。

防抖（Debounce）
防抖的基本思想是，在函数需要频繁触发时，只有当事件触发完毕后一定时间内没有再次触发，才会执行该函数。如果在等待时间内又有触发，则重新计时。这样可以避免函数的过多调用，提升性能。

使用场景：

输入框输入事件：比如实时搜索联想功能，在用户输入时，等用户停止输入一段时间后再发送搜索请求，避免频繁请求后端接口。

窗口大小调整：窗口大小调整事件会频繁触发，使用防抖可以确保只在用户停止调整窗口大小后执行调整处理逻辑。

按钮点击事件：对于一些点击频率较高的按钮，比如提交按钮防止重复点击多次执行。

function debounce(func, delay) {let timer;return function() {clearTimeout(timer);timer = setTimeout(() => {func.apply(this, arguments);}, delay);};
}// 示例：防抖处理输入框输入事件
const input = document.getElementById('searchInput');
input.addEventListener('input', debounce(function() {// 实际处理函数console.log('Perform search operation...');
}, 300));  // 等待300毫秒后执行实际处理函数

节流（Throttle）
节流的基本思想是，在函数需要频繁触发时，确保在一定时间间隔内只执行一次该函数。即使在等待时间内有多次触发，也只会执行一次。节流能保证函数不会因为高频率触发而导致性能问题。

使用场景：

滚动事件：页面滚动事件可能会导致频繁触发，使用节流可以减少滚动事件处理函数的执行次数，优化性能。

拖拽事件：拖拽元素时，mousemove 事件可能会非常频繁，使用节流确保拖拽事件处理函数在一定时间间隔内执行。

动画效果：滚动动画或者 resize 动画等可以使用节流来控制触发频率，避免动画过于密集执行。

function throttle(func, delay) {let timer = null;return function() {if (!timer) {timer = setTimeout(() => {func.apply(this, arguments);timer = null;}, delay);}};
}// 示例：节流处理页面滚动事件
window.addEventListener('scroll', throttle(function() {// 实际处理函数console.log('Scroll event throttled...');
}, 200));  // 限制每200毫秒触发一次滚动事件处理函数