一、防抖（Debounce）
定义
防抖是指在事件被触发后的一段时间内，只有当事件不再被触发时，才执行一次函数。如果在这段时间内再次触发事件，则重新计时。
特点
- 延迟执行：只有在事件停止触发一段时间后，才会执行函数。
- 适合场景：输入框搜索、窗口调整大小、按钮点击等需要等待用户操作完成后再执行的场景。
实现原理
通过设置一个定时器，在每次事件触发时清除之前的定时器并重新设置新的定时器。如果定时器到期且没有新事件触发，则执行函数。
代码示例
function debounce(fn, delay) {
let timer; // 定时器
return function (...args) {
if (timer) clearTimeout(timer); // 清除之前的定时器
timer = setTimeout(() => {
fn.apply(this, args); // 执行函数
}, delay);
};
}
// 使用示例
const handleResize = debounce(() => {
console.log('窗口大小已调整');
}, 300);
window.addEventListener('resize', handleResize);
二、节流（Throttle）
定义
节流是指在一定时间间隔内，只允许函数执行一次。无论事件触发多少次，函数只会按照设定的时间间隔执行。
特点
- 固定频率执行：保证函数在一定时间内最多执行一次。
- 适合场景：滚动事件、鼠标移动事件、连续点击按钮等需要控制执行频率的场景。
实现原理
通过设置一个标志位或定时器，在第一次触发时立即执行函数，并在设定的时间间隔内阻止后续触发，直到时间间隔结束。
代码示例
function throttle(fn, interval) {
let lastTime = 0; // 上次执行时间
return function (...args) {
const nowTime = new Date().getTime(); // 当前时间
if (nowTime - lastTime >= interval) { // 检查是否超过时间间隔
lastTime = nowTime; fn.apply(this, args); // 执行函数 } }; }
// 使用示例
const handleScroll = throttle(() => { console.log('页面正在滚动'); }, 500);
window.addEventListener('scroll', handleScroll);
