防抖和节流

2025-04-05 | 0 浏览 | 0 评论

防抖和节流

在JavaScript中，防抖（debounce）和节流（throttle）是两种常见的函数执行优化策略，通常用于处理高频触发的事件，如窗口的resize或scroll事件等，以提高性能和用户体验。

防抖（Debounce）

防抖是指将一段时间内多次触发的事件合并为一次执行。当最后一次触发事件后的一段时间内没有再次触发，则执行该事件处理函数。如果在这段时间内又有新的触发，则重新计算延迟时间。即，即多次执行，只有最后一次才被执行，如果n毫秒内被多次触发，则重新计算延迟。

下面是一个简单的防抖函数实现：

function debounce(func, wait) {
    let timeout;
    return function() {
        const context = this;
        const args = arguments;
        clearTimeout(timeout);
        timeout = setTimeout(function() {
            func.apply(context, args);
        }, wait);
    };
}

使用示例：

const button = document.querySelector('button');
button.addEventListener('click', debounce(function() {
    console.log('Clicked');
}, 300));

节流（Throttle）

节流是指固定时间内只让函数执行一次。不论在这个时间段内触发了多少次事件，函数都只会执行一次。当这个时间段结束后，会允许下一次执行。即，先执行1次，然后延迟n毫秒后才能再次执行。

一个常见的实现方式是使用一个标志位来阻止重复调用：

function throttle(func, limit) {
    let inThrottle;
    return function() {
        const args = arguments;
        const context = this;
        if (!inThrottle) {
            func.apply(context, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    };
}

使用示例：

window.addEventListener('resize', throttle(function() {
    console.log('Resized');
}, 100));

这两种方法可以帮助你在处理用户输入或浏览器事件时避免不必要的计算和渲染，从而提升应用性能。选择哪一种取决于具体的应用场景和需求。

笔记