我不明白为什么我的计时器在 javascript keydown 事件上停止。这就是我想要的，但我只是不知道为什么它停止了

Question

我有一个 keyup 事件来启动计时器，但我不明白为什么它在 keydown 时停止。它正在按预期工作，但我无法理解它为什么会工作。为什么定时器在按键时停止？我没有在 keydown 事件侦听器中的任何位置调用 stopWatch 函数。我已经经历了我能想到的所有可能的场景，但对我来说仍然没有意义。

let cubeTimer = document.getElementById("cubeTimer");
let appendMinutes = document.getElementById("minutes");
let appendSeconds = document.getElementById("seconds");
let appendMilliseconds = document.getElementById("milliseconds");
let scramble = document.getElementById("scramble");

let minutes = 0;
let seconds = 0;
let milliseconds = 0.00;
let start = true;
let stop = false;
let arr = [];
let interval;
let scrambleArray = ["R", "L", "R'", "L'", "U", "D", "U'", "D'", "F", "B", "F'", "B'", "R2", "L2", "U2", "B2", "D2", "F2"];

function scrambleCube () {
    let newArr = []
    for (let i = 0; i < 21; i++) {
        if (newArr.length >= 1) {
            newArr.push(scrambleArray[Math.floor(Math.random() * 18)]);
            do {
                newArr[i] = scrambleArray[Math.floor(Math.random() * 18)]
            } while (newArr[i][0] === newArr[i - 1][0]);
        }; 
        if (newArr.length < 1) {
            newArr.push(scrambleArray[Math.floor(Math.random() * 18)]);
        };
        
    };

    for (let i = 0; i < newArr.length; i++) {
        newArr[i] = " " + newArr[i]
    };

    scramble.innerHTML = newArr;
    
    //console.log(newArr)
    
}
scrambleCube()

document.addEventListener("keydown", () => {
    
    arr.push("a");
    if (arr.length > 10) {
        cubeTimer.style.color = "green";
        cubeTimer.style.fontSize = "40px";
        start = true;
        stop = false;
        minutes = 0;
        seconds = 0;
        milliseconds = 0.00;
        appendMinutes.innerHTML = "00";
        appendSeconds.innerHTML = "00";
        appendMilliseconds.innerHTML = "00";
    } else if (arr.length < 10) {
        cubeTimer.style.color = "red";
    }

    if (start === false) { stop = true };
    
    
});

document.addEventListener("keyup", () => {
    start = false;
    cubeTimer.style.color = "green";
    if (arr.length > 10) {
        interval = setInterval(stopWatch, 10);    
    }
    arr = [];
});



function stopWatch () {
    if (stop === true) {  
        clearInterval(interval);
        scrambleCube()
    };

    milliseconds++;

    if (milliseconds == 100) {
        seconds++;
        milliseconds = 0;
    };
    
    if  (seconds == 60) {
        minutes++;
        seconds = 0;
    };

    let milliString = milliseconds;
    let secondString = seconds;
    let minuteString  = minutes;
    
    if (minutes < 10) {
        minuteString = "0" + minuteString;
    };

    if (seconds < 10) {
        secondString = "0" + secondString;
    };

    if (milliseconds < 10) {
        milliString = "0" + milliString;
    };

    appendMinutes.innerHTML = minuteString;
    appendSeconds.innerHTML = secondString;
    appendMilliseconds.innerHTML = milliString;
    
};

Answer 1

即使您没有在 keydown 事件侦听器中的任何位置调用函数 stopWatch() 。 keyup 事件监听器以 10 毫秒的间隔运行您的 stopWatch 函数()。

if (arr.length > 10) {
        interval = setInterval(stopWatch, 10);    
    }

因此它将继续每 10 毫秒调用 stopWatch() 一次，直到间隔被清除。当你按下 keydown 时，它会将 stop 设置为 true，这在下一个 stopWatch() 调用中满足你的条件：

if (stop === true) {  
    clearInterval(interval);
    scrambleCube()
};

因此它会清除Interval，stopWatch函数将停止调用，这就是您的代码正常工作的原因。