前端防抖和节流，区别是什么？

优化性能的关键策略与它们之间的差异解析

在前端开发的广阔领域中，性能优化是提升用户体验不可或缺的一环，随着网页应用的复杂度日益增加，如何有效控制高频事件（如滚动、输入、调整窗口大小等）触发的函数执行次数，成为了开发者们关注的焦点，在这一背景下，防抖（Debounce）与节流（Throttle）作为两种高效的技术策略应运而生，它们虽目的相似，却在实现机制与应用场景上大相径庭，本文将深入探讨防抖与节流的概念、实现方式以及它们之间的核心区别。

防抖（Debounce）：等待最后的舞者

防抖，简而言之，就是一种限制函数频繁执行的技术，它确保只有在事件停止触发后的一段时间内，函数才会被执行一次，这就像是一场舞会中的最后一位舞者，无论中间有多少人邀请，都只与最后一位共舞，防抖的核心在于“等待”，它通过设置一个定时器，在事件被连续触发时不断重置这个定时器，直到事件停止触发超过设定的时间阈值,才会真正执行目标函数。

前端防抖和节流，区别是什么？

实现示例：

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

应用场景：搜索框自动补全、表单验证、窗口大小调整后的布局重绘等，这些场景下，用户往往期望看到的是最终状态,而非过程中的每一次变化。

节流（Throttle）：定时定量的执行者

与防抖不同，节流的目标是控制函数在一定时间间隔内最多只执行一次，无论事件触发的频率有多高，这如同一个定时定量的执行者，无论任务请求多么密集，它都按照自己的节奏，有条不紊地处理，节流通过记录上一次执行的时间戳，并在每次事件触发时检查当前时间与上次执行时间的差值，如果超过设定的时间间隔，则执行函数,否则忽略。

实现示例：

function throttle(func, limit) {
    let lastFunc;
    let lastRan;
    return function(...args) {
        const context = this;
        if (!lastRan) {
            func.apply(context, args);
            lastRan = Date.now();
        } else {
            clearTimeout(lastFunc);
            lastFunc = setTimeout(function() {
                if ((Date.now() - lastRan) >= limit) {
                    func.apply(context, args);
                    lastRan = Date.now();
                }
            }, limit - (Date.now() - lastRan));
        }
    };
} //（或更简洁的通过时间戳直接比较的方式）
// 简洁版：
function throttleSimple(func, limit) {
    let lastCall = 0;
    return function(...args) {
        const now = Date.now();
        if (now - lastCall >= limit) {
            func.apply(this, args);
            lastCall = now;
        }
    };
}

应用场景：滚动事件处理、动画帧更新、高频点击事件等，这些场景下，需要保证函数在一定时间内至少执行一次,同时避免过度执行导致的性能问题。