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));

应用场景

• 页面滚动监听：当页面滚动时，不需要每次滚动都执行计算元素位置等操作，隔一段时间执行一次，既能满足需求，又能节省性能。
• 鼠标移动跟踪：比如在实现一个跟随鼠标移动的效果时，不需要每移动一个像素就更新位置，节流后可按一定频率更新，让动画更流畅。

选择合适的技巧

在实际开发中，得根据具体场景选防抖还是节流。如果希望在连续操作结束后统一处理，像搜索框输入，就用防抖；要是想按固定频率处理事件，比如滚动监听，节流更合适。

总之，掌握事件节流与防抖技巧，能有效优化 JavaScript 的事件处理，让网页性能更优，用户用起来也更舒服。在开发中多实践，就能更熟练地运用它们解决实际问题。