JavaScript空格键启停60秒倒计时故障求助：启动后无法停止

你的代码存在三个核心问题，导致倒计时启动后无法停止：

1. timer变量作用域错误
   你在启动倒计时的if块内部声明了var timer，这个变量的作用域仅限于该块级内部。当执行停止逻辑的第二个if时，timer处于未定义状态，自然无法清除定时器。

2. 条件判断逻辑冲突
   两个独立的if语句会在同一按键事件中依次执行：第一次按空格时，先进入启动逻辑将isRunning设为1，紧接着第二个if就会触发停止逻辑，导致倒计时刚启动就被终止。

3. 倒计时结束后未重置状态
   当倒计时归0时，没有将isRunning重置为0，导致后续无法再次启动倒计时。

修复后的代码 #

var timeLeft = 60;                                                          /* 倒计时时长 */
var isRunning = 0;                                                          /* 判断倒计时是否处于运行状态 */
var timer; // 将timer提升到外部作用域，让启停逻辑都能访问
document.addEventListener("keydown", function(event) {                      /* 绑定键盘事件监听 */
    if (event.keyCode == 32) {                                              /* 判断是否按下空格键 */
        event.preventDefault(); // 防止空格键默认的页面滚动行为
        if (isRunning == 0) {                                               /* 如果倒计时未运行 */
            timer = setInterval(function() {                                /* 启动1秒间隔的定时器 */
                isRunning = 1;                                              /* 标记倒计时为运行状态 */
                if (timeLeft <= 0) {                                        /* 如果倒计时归0 */ 
                    clearInterval(timer);                                   /* 停止定时器 */
                    isRunning = 0; // 重置状态，允许再次启动
                    document.getElementById("countdown").innerHTML = ":00";
                } else {
                    // 处理两位数显示，比如5秒显示为:05而非:5
                    const displayTime = timeLeft < 10 ? ":0" + timeLeft : ":" + timeLeft;
                    document.getElementById("countdown").innerHTML = displayTime;
                    timeLeft -= 1;
                }
            }, 1000);
        } else if (isRunning == 1) { // 改成else if，避免同一事件中同时执行启停逻辑
            isRunning = 0;                                                    /* 标记倒计时为停止状态 */
            clearInterval(timer);                                             /* 停止定时器 */
            // 统一时间显示格式
            const displayTime = timeLeft < 10 ? ":0" + timeLeft : ":" + timeLeft;
            document.getElementById("countdown").innerHTML = displayTime;
        }
    }
});

额外优化说明 #

• 添加event.preventDefault()，避免按下空格键时页面自动滚动。
• 增加两位数时间显示逻辑，让倒计时的视觉呈现更规范。

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