面试题：JavaScript 中 setTimeout 与 setInterval 的应用优化

1. 优化思路

减少定时器使用数量：检查代码中是否存在不必要的定时器，将可以合并的定时器功能进行整合。例如，若有多个定时器执行类似的定期更新操作，可以合并为一个定时器，在其回调函数中根据不同条件执行不同逻辑。
精确控制定时器时间间隔：避免设置过短的时间间隔，因为过短间隔会使定时器回调过于频繁执行，占用过多 CPU 资源。根据实际需求合理调整时间间隔，例如对于一些非实时性要求极高的更新操作，可以适当延长时间间隔。
及时清除定时器：对于不再需要的定时器，必须及时调用 clearTimeout 或 clearInterval 进行清除，防止其继续占用内存和 CPU 资源。

2. 避免内存泄漏

清除 DOM 引用：在定时器回调函数中，如果有对 DOM 元素的引用，当相关 DOM 元素从页面移除时，确保定时器回调中不再持有该 DOM 元素的引用。例如，可以在 DOM 元素移除的事件处理函数中，清除对应的定时器。

const element = document.getElementById('my-element');
const timer = setInterval(() => {
    // 操作 element
}, 1000);
element.addEventListener('remove', () => {
    clearInterval(timer);
});

解绑事件监听器：若定时器回调函数中绑定了事件监听器，在定时器清除前，需解绑这些事件监听器。

const button = document.getElementById('my-button');
const timer = setInterval(() => {
    const handleClick = () => {
        // 处理点击逻辑
    };
    button.addEventListener('click', handleClick);
}, 1000);
// 清除定时器前解绑事件监听器
clearInterval(timer);
button.removeEventListener('click', handleClick);

3. 性能损耗优化技巧

使用 requestAnimationFrame 替代部分定时器：对于动画相关的定时操作，requestAnimationFrame 能根据浏览器的刷新频率来执行回调，比 setTimeout 和 setInterval 更加高效，且能避免掉帧等问题。

function animate() {
    // 动画逻辑
    requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

防抖与节流：对于一些用户触发频繁的操作（如滚动、窗口大小改变等），使用防抖或节流技巧。防抖是在一定时间内，若再次触发则重新计时，直到计时结束才执行回调；节流是在一定时间间隔内，无论触发多少次，只执行一次回调。

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

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

星途面试题库

面试题：JavaScript 中 setTimeout 与 setInterval 的应用优化

知识考点

面试题答案

1. 优化思路

2. 避免内存泄漏

3. 性能损耗优化技巧