告别页面卡顿：一文讲透前端防抖与节流的核心原理

在日常的 Web 开发中，我们经常会遇到一些高频触发的事件，比如浏览器窗口的 resize、页面的 scroll 滚动，或者是搜索框的 input 输入。如果每次事件触发都直接去执行对应的业务逻辑（比如发送网络请求、重新计算页面布局），极易导致浏览器卡顿甚至崩溃。

为了解决这个问题，前端诞生了两个极其重要的性能优化手段：防抖（Debounce）和节流（Throttle）。

一、 防抖（Debounce）：等一等再执行

核心思想：在事件被触发后，不立即执行回调，而是等待一段时间。如果在这段时间内事件又被触发了，就重新计时。只有当这段时间内事件没有被再次触发，才真正执行回调。

生活场景：就像坐电梯，只要有人进来，电梯就会重新开门等待，直到一段时间内没人进来了，电梯门才会关上并运行。

应用场景：搜索框输入联想、表单实时校验、窗口大小改变后的重新渲染。

核心代码实现：

function debounce(func, wait) {
    let timeout;
    return function (...args) {
        // 如果之前有定时器，先清除掉，重新计时
        clearTimeout(timeout);
        timeout = setTimeout(() => {
            func.apply(this, args);
        }, wait);
    };
}

二、 节流（Throttle）：按固定频率执行

核心思想：规定在一个单位时间内，回调函数只能被执行一次。如果在这个单位时间内触发了多次事件，只有第一次会生效，后续的都会被丢弃。

生活场景：就像地铁发车，不管站台上挤了多少人，地铁都是每隔固定的 5 分钟发一趟，不会因为人多就提前发车。

应用场景：滚动加载更多数据、鼠标拖拽时的位置更新、防止按钮被连续点击。

核心代码实现：

function throttle(func, wait) {
    let lastTime = 0;
    return function (...args) {
        const now = Date.now();
        // 只有距离上次执行的时间超过了设定的间隔，才允许执行
        if (now - lastTime >= wait) {
            func.apply(this, args);
            lastTime = now;
        }
    };
}

三、 总结

简单来说，防抖是把多次触发合并为最后一次执行，而节流是保证在一段时间内只执行一次。