JavaScript 函数节流原理与实用实现方案

方予

发布时间：2026-10-14| 4人浏览过

原创

在 Web 开发中，调整窗口大小（resize）、滚动屏幕（scroll）或用户输入（input/keyup）等事件会极其频繁地触发回调。若在这些事件中直接进行 DOM 读写或复杂计算，会导致浏览器不断重排和重绘，引发页面卡顿甚至崩溃。函数节流（Throttle）旨在限制函数的执行频率，确保在指定的时间间隔内只执行一次，从而在保证用户体验的同时提升页面性能。

为什么需要函数节流？

DIM 交互和非 DOM 交互相比，消耗更多的内存和 CPU 时间。如果在 onresize 或 touchmove 这样的高频事件中连续进行 DOM 操作，浏览器的渲染引擎将面临巨大压力。例如，快速缩放浏览器窗口时，若每次触发动画或尺寸重置，DOM 会被反复重绘，导致页面响应迟缓。

函数节流的基本思想是：无论事件触发多少次，在设定的时间间隔内，实际执行的逻辑只运行一次。通常采用“延迟执行”的策略，即在停止触发一段时间后，再让代码真正运行。

基础实现：纯函数方式

最经典的节流实现利用定时器清除机制。每次调用时清除之前的定时器并重新设置一个新的。如果前一个定时器已经执行，再次设置新定时器则无意义；如果尚未执行，则刷新计时器，从而实现“冷却”效果。

function throttle(method, context) {
    // 先清除已有的定时器
    clearTimeout(method.tId);
    // 重新设置定时器
    method.tId = setTimeout(function() {
        method.call(context);
    }, 100);
}

应用场景：假设有如下代码用于保持 <div> 高度与宽度一致：

function resizeDiv() {
    var div = document.getElementById("mydiv");
    div.style.height = div.offsetWidth + "px";
}

window.onresize = function() {
    // 使用节流包裹业务逻辑
    throttle(resizeDiv);
};

在此模式下，用户调整窗口大小时，resizeDiv 只有在停止拖拽约 100 毫秒后才会执行最后一次计算。这极大地节省了中间过程不必要的 DOM 操作开销，且对感知无明显影响。

进阶实现：对象封装模式

为了便于管理和维护状态，可以将定时器 ID 挂载在对象上。这种方式更适合需要在多个位置复用或需要重置状态的复杂场景。

var haoroomstest = {
    timeoutId: null,
    performProcessing: function() { 
        console.log("处理完成"); 
    },
    process: function() {
        var that = this;
        clearTimeout(this.timeoutId);
        this.timeoutId = setTimeout(function() {
            that.performProcessing();
        }, 500)
    }
}

使用时绑定到事件：

$(window).resize(function(){ 
    haoroomstest.process(); 
})

相比于直接调用，这种封装方式结构更清晰，但核心逻辑依然是基于 clearTimeout 和 setTimeout 的组合。

流行实现：返回闭包函数

另一种常见的写法是通过高阶函数返回一个新函数。这种方式可以保留原始的 this 指向和参数，使用更加灵活。

function throttle(method, delay) {
    var timer = null;
    return function() {
        var context = this, args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function() {
            method.apply(context, args);
        }, delay);
    }
}

调用示例：

window.onresize = throttle(function() {
    console.log("throttled action");
}, 500);

特殊需求：基于时间窗口的节流

在处理模糊搜索（如 input 或 keyup 事件）时，单纯的延迟执行可能导致用户在持续输入过程中看不到实时反馈。此时需要一种更智能的节流：如果在时间窗口内没有新的动作，则执行；如果窗口时间到了但未执行，立即执行以保证响应速度。

function throttle(method, delay, duration) {
    var timer = null, begin = new Date();
    return function() {
        var context = this, args = arguments, current = new Date();
        clearTimeout(timer);
        // 如果距离上次开始执行的时间已经超过duration，直接执行
        if (current - begin >= duration) {
            method.apply(context, args);
            begin = current;
        } else {
            // 否则启动一个delay延迟的执行
            timer = setTimeout(function() {
                method.apply(context, args);
            }, delay);
        }
    }
}

该实现结合了两种策略：长时间未操作时保证一定延迟后执行；频繁操作时，一旦超过设定阈值（duration），则立刻强制执行一次，避免用户等待过久。