JavaScript中的防抖和节流

JavaScript中的防抖和节流是两种常见的优化技术，用于处理频繁触发的事件，例如浏览器窗口调整、滚动页面等。这两种技术可以有效地减少事件处理的次数，提高页面性能。

防抖

防抖是指当一个事件被触发后，在一定时间内如果该事件再次被触发，那么就会取消前一次的操作，重新开始计时。这种技术的作用是防止在短时间内频繁触发事件导致页面性能下降。

下面是一个简单的防抖的示例：

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

function handleInput() {
    console.log('Input event has been debounced');
}

const input = document.querySelector('input');
input.addEventListener('input', debounce(handleInput, 500));

在上面的示例中，防抖函数会在用户停止输入500毫秒后才会执行事件处理函数。如果在这500毫秒内发生了另一个输入事件，那么上一次的计时就会被清除，重新开始计时。

节流

节流是指在一定时间内，无论事件触发的次数有多少，都只会执行一次事件处理函数。这种技术的作用是保证在频繁触发事件的情况下，只会在一定时间间隔内执行一次事件处理函数，避免过多的计算和渲染操作。

下面是一个简单的节流的示例：

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

function handleScroll() {
    console.log('Scroll event has been throttled');
}

window.addEventListener('scroll', throttle(handleScroll, 500));

在上面的示例中，节流函数会在用户滚动窗口超过500毫秒后才会执行事件处理函数。如果在这500毫秒内发生了多次滚动事件，那么只会执行一次事件处理函数。