防抖节流

38 阅读1分钟

防抖(Debounce)

通过定时器延迟执行函数,若在规定时间内重复触发事件则会重置定时器,直到事件停止触发后才会执行回调。其核心是「延迟执行,频繁触发时重置计时」

实现如下:


    let timer = null;

    return (...args) => {

        clearTimeout(timer);

        timer = setTimeout(() => func.apply(this, args), delay);

    };

}

应用场景:输入搜索、页面窗口调整、提交按钮多次点击

节流(Throttle)

通过固定时间间隔执行函数,无论触发频率多高,回调函数在指定时间内最多执行一次。其核心是「限频执行,保证固定频率触发」

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

应用场景:页面滚动、鼠标高频点击、鼠标拖拽

对比

image.png

防抖优先场景:用户明确停止后执行(如搜索)

节流优先场景:执行频率高但避免过高损耗(如动画渲染)