防抖和节流| 豆包MarsCode AI刷题

防抖

定义：防抖是一种控制函数执行频率的技术，确保在连续触发事件时，函数只在一段时间内没有再被触发后才执行一次。

适用场景：

• 输入框的实时搜索
• 窗口调整大小
• 按钮点击频率控制

实现方式：

javascript
function debounce(func, delay) {  
    let timer;  
    return function(...args) {  
        if (timer) clearTimeout(timer);  
        timer = setTimeout(() => {  
            func.apply(this, args);  
        }, delay);  
    };  
}  

// 使用示例  
const handleResize = debounce(() => {  
    console.log('Window resized');  
}, 300);  

window.addEventListener('resize', handleResize);  

节流

定义：节流是一种控制函数执行频率的技术，在固定时间间隔内只执行一次，即使函数被频繁触发。

适用场景：

• 滚动事件
• 动画
• 定时器控制

实现方式：

javascript
function throttle(func, delay) {  
    let lastTime = 0;  
    return function(...args) {  
        const now = Date.now();  
        if (now - lastTime >= delay) {  
            lastTime = now;  
            func.apply(this, args);  
        }  
    };  
}  

// 使用示例  
const handleScroll = throttle(() => {  
    console.log('Scrolled');  
}, 200);  

window.addEventListener('scroll', handleScroll);  

总结

• 防抖：在事件停止触发后一起执行，适合处理用户的输入。
• 节流：在指定时间间隔内定时执行，适合控制高频事件（如滚动、拖动等）。