Uncaught ReferenceError问题：调用clearInterval时startTimer提示未定义求助

问题场景 #

编写秒表功能时，点击Start按钮通过startWatch函数创建startTimer定时器执行计时逻辑；点击Pause按钮调用pauseWatch函数尝试用clearInterval(startTimer)清除定时器，却触发Uncaught ReferenceError，提示startTimer未定义。

相关代码 #

JS代码

const startBtn = document.querySelector('.startBtn');
const pauseBtn = document.querySelector('.pauseBtn');
const ResetBtn = document.querySelector('.resetBtn');
const time = document.querySelector('.time');

let seconds = 0;
let secondsStr = '00';
let minutes = 0;
let minutesStr = '00';
let hours = 0;
let hoursStr = '00';
let timeText = `${hoursStr}:${minutesStr}:${secondsStr}`;
time.textContent = timeText;

function addSecond() {
    seconds++;
    secondsStr = seconds.toString();
    if (seconds < 10) {
        secondsStr = `0${secondsStr}`;
    }
    
    if(seconds >= 60) {
        seconds = 0;
        minutes++;
        minutesStr = minutes.toString();
        if (minutes < 10) {
            minutesStr = `0${minutesStr}`;
        }
        
        if(minutes >= 60) {
            minutes = 0;
            hours++;
            hoursStr = hours.toString();
            if (hours < 10) {
                hoursStr = `0${hoursStr}`;
            }
        }
    }
    timeText = `${hoursStr}:${minutesStr}:${secondsStr}`;
    time.textContent = timeText;
}

startBtn.addEventListener('click', startWatch);
pauseBtn.addEventListener('click', pauseWatch);

function startWatch() {
    const startTimer = setInterval(addSecond, 1000);
}

function pauseWatch() {
    clearInterval(startTimer);
}

HTML代码

<div class="stopwatch">
        <div class="time"></div>
        <div class="stopwatchBtns">
            <button class="startBtn stopwatchBtn">Start</button>
            <button class="pauseBtn stopwatchBtn">Pause</button>
            <button class="resetBtn stopwatchBtn">Reset</button>
        </div>
    </div>

问题原因 #

startTimer是在startWatch函数内部用const声明的变量，作用域仅限于startWatch函数内部，pauseWatch函数无法访问到这个变量，因此调用clearInterval(startTimer)时会触发未定义错误。

修复方案 #

将startTimer的声明提升到全局作用域（和其他计时变量同级），用let声明（因为需要在startWatch中重新赋值），这样pauseWatch就能访问到定时器实例。同时额外优化：在startWatch中先清除已存在的定时器，避免多次点击Start创建多个并行定时器导致计时加速。

修改后的完整JS代码 #

const startBtn = document.querySelector('.startBtn');
const pauseBtn = document.querySelector('.pauseBtn');
const ResetBtn = document.querySelector('.resetBtn');
const time = document.querySelector('.time');

let seconds = 0;
let secondsStr = '00';
let minutes = 0;
let minutesStr = '00';
let hours = 0;
let hoursStr = '00';
let timeText = `${hoursStr}:${minutesStr}:${secondsStr}`;
// 全局声明定时器变量，初始值设为null
let startTimer = null;

time.textContent = timeText;

function addSecond() {
    seconds++;
    secondsStr = seconds.toString();
    if (seconds < 10) {
        secondsStr = `0${secondsStr}`;
    }
    
    if(seconds >= 60) {
        seconds = 0;
        minutes++;
        minutesStr = minutes.toString();
        if (minutes < 10) {
            minutesStr = `0${minutesStr}`;
        }
        
        if(minutes >= 60) {
            minutes = 0;
            hours++;
            hoursStr = hours.toString();
            if (hours < 10) {
                hoursStr = `0${hoursStr}`;
            }
        }
    }
    timeText = `${hoursStr}:${minutesStr}:${secondsStr}`;
    time.textContent = timeText;
}

startBtn.addEventListener('click', startWatch);
pauseBtn.addEventListener('click', pauseWatch);

function startWatch() {
    // 先清除已存在的定时器，避免重复创建
    if (startTimer) clearInterval(startTimer);
    startTimer = setInterval(addSecond, 1000);
}

function pauseWatch() {
    clearInterval(startTimer);
}

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