JavaScript 事件处理优化技巧：事件节流与防抖

xiaoshi 05-30 9 抢沙发

默认

摘要： ...

JavaScript 性能优化法宝：事件节流与防抖

在网页开发里，JavaScript 的事件处理是关键环节。但要是处理不好，就容易让页面变卡，影响用户体验。事件节流与防抖这俩技巧，能有效优化事件处理，今儿咱就好好唠唠。

理解高频事件触发困境

网页上像滚动（scroll）、窗口缩放（resize）、输入框输入（input）这类操作，会频繁触发事件。比如用户在输入框里快速打字，input 事件可能每秒触发好多次。要是每次触发都执行复杂的处理逻辑，浏览器就会忙不过来，导致页面卡顿。

事件防抖：合并连续触发

防抖的原理就是，设定一个延迟时间，在这个时间内如果事件再次触发，就重新计时。只有在延迟时间内没有再次触发事件，才会执行对应的处理函数。这就好比你在等电梯，本来电梯 5 秒后关门，可不断有人按电梯按钮，电梯就会不断重置关门时间，直到没人按了，5 秒后才关门。

防抖代码实现

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

// 使用示例
const inputElement = document.getElementById('input');
inputElement.addEventListener('input', debounce(() => {
    console.log('处理输入操作');
}, 300));

应用场景

搜索框输入：用户边输入边搜索时，没必要每次输入都发起搜索请求，等用户停止输入一会儿后再搜索，能减少服务器压力，提升用户体验。
按钮多次点击：防止用户手抖多次点击按钮，导致重复提交表单之类的问题。

事件节流：控制触发频率

节流则是规定在一定时间间隔内，只能触发一次事件。就像水龙头滴水，你可以控制它每隔几秒滴一滴，而不是一股脑全流出来。

节流代码实现

function throttle(func, interval) {
    let lastTime = 0;
    return function() {
        const context = this;
        const args = arguments;
        const now = new Date().getTime();
        if (now - lastTime >= interval) {
            func.apply(context, args);
            lastTime = now;
        }
    };
}

// 使用示例
window.addEventListener('scroll', throttle(() => {
    console.log('处理滚动操作');
}, 200));