setInterval每次触发后速度递增：JS自学中div移动速度异常问题

问题核心在于每次按下空格键都会新建一个setInterval定时器，但旧的定时器从未被清除——多个定时器同时修改火箭位置，自然会让移动速度叠加变快。

具体修复步骤： #

• 声明一个变量专门保存定时器ID，方便后续清除
• 每次创建新定时器前，先清除之前的定时器
• 火箭移出屏幕后，及时清除定时器，避免无用的资源消耗

修改后的代码示例：

// 在全局或合适的作用域中声明定时器变量
let rocketInterval;

window.addEventListener('keydown', (event) => {
    switch (event.key) {
        case ' ':
            if (posLeft > canvasWidth - 100 || Rocket.style.visibility != 'hidden') {
                Rocket.style.visibility = 'hidden';
                // 隐藏火箭时同步清除定时器
                clearInterval(rocketInterval);
            } else {
                Rocket.style.visibility = 'visible';
                console.log(posLeft);
                Rocket.style.left = (Player.offsetLeft + Player.offsetWidth) + 'px';
                Rocket.style.top = (Player.offsetTop + Player.offsetHeight / 2.5) + 'px';
                
                // 先清除旧定时器，避免多实例叠加
                clearInterval(rocketInterval);
                // 创建新定时器并保存ID，建议显式设置间隔（16ms接近60帧，动画更平滑）
                rocketInterval = setInterval(function () {
                    if (rocketLeft < canvasWidth) {
                        rocketLeft++;
                        console.log(rocketLeft);
                        Rocket.style.left = parseInt(Rocket.style.left, 10) + 1 + 'px';
                    } else {
                        // 火箭移出屏幕后，清除定时器并重置状态
                        clearInterval(rocketInterval);
                        Rocket.style.visibility = 'hidden';
                        rocketLeft = 0;
                    }
                }, 16);
            }
            break;
    }
});

额外提示：原代码中setInterval未指定时间间隔，浏览器会使用默认值（通常10ms左右），显式设置间隔能让动画速度更稳定可控。

内容的提问来源于stack exchange，提问作者BenC