面试题：JavaScript 文档滚动监听中如何优化性能并实现节流与防抖

Question

在进行文档滚动监听时，频繁触发的事件可能会影响性能。请阐述如何通过节流（throttle）和防抖（debounce）技术来优化，并用 JavaScript 代码实现这两种优化方式，在滚动监听场景中分别应用它们。

Answer 1

节流（Throttle）

节流技术是指在一定时间间隔内，无论触发事件的频率多高，都只执行一次回调函数。这可以避免短时间内频繁触发函数带来的性能问题。

实现思路

1. 记录上一次函数执行的时间。
2. 每次触发事件时，计算当前时间与上次执行时间的差值。
3. 如果差值大于设定的时间间隔，则执行回调函数，并更新上一次执行时间。

JavaScript 代码实现

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

// 在滚动监听场景中应用节流
window.addEventListener('scroll', throttle(() => {
    console.log('滚动事件被节流处理');
}, 300));

防抖（Debounce）

防抖技术是指当事件触发后，延迟一定时间执行回调函数。如果在延迟时间内再次触发事件，则重新计算延迟时间，直到最后一次触发事件后的延迟时间结束，才执行回调函数。

实现思路

1. 使用 setTimeout 设置一个延迟执行的定时器。
2. 每次触发事件时，清除之前的定时器，并重新设置一个新的定时器。
3. 当延迟时间结束，执行回调函数。

JavaScript 代码实现

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

// 在滚动监听场景中应用防抖
window.addEventListener('scroll', debounce(() => {
    console.log('滚动事件被防抖处理');
}, 300));