js防抖节流

防抖和节流是 JavaScript 中常见的性能优化技术，用于控制函数的执行频率，以减少资源浪费，尤其是在处理高频事件（如滚动、输入、调整窗口大小等）时。

防抖 (Debounce)

防抖的概念是：在某个事件触发后，等待一段时间，如果在这段时间内该事件再次被触发，则重新计时。只有在指定时间内没有再次触发事件，才会执行函数。

适用场景： 用户停止输入后触发搜索、窗口大小调整完成后进行处理等。

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

// 示例用法
window.addEventListener('resize', debounce(() => {
    console.log('窗口大小调整完毕');
}, 500));

节流 (Throttle)

节流的概念是：规定一个时间段内只能执行一次函数，如果该时间段内再次触发事件，则不执行，直到时间段结束。

适用场景： 滚动事件的处理、频繁点击按钮的处理等。

<button onclick="throttledClick()">点击</button>

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

    function handleClick() {
        console.log('按钮被点击了');
    }

    const throttledClick = throttle(handleClick, 2000);

总结

• 防抖：适用于希望某个动作只在用户停止操作一段时间后才执行的场景。

• 节流：适用于需要限制某个操作的执行频率，避免过于频繁的场景。