重置JS秒表时遇到问题

Question

我制作了一个小打字游戏，其中显示了一些随机文本，因此您必须输入相同的内容，以便测试打字速度。用户具有一次又一次播放的能力，问题是当用户键入再次播放时，秒表不会像第一次一样开始计时。

每当用户单击再次播放按钮时，谁能帮助我重新启动秒表？

[完整代码在这里]（https://jsfiddle.net/kisho/ncbxd9o4/#&togetherjs=qD5bT8vLiw）

js部分-

const textDisplay = document.querySelector('#text-display');
const input = document.querySelector('#input');
const btn = document.querySelector('#btn');
const textBox = document.querySelector('#text-box');
const countdown = document.querySelector('#countdown');
const stopwatch = document.querySelector('#stopwatch');
const successMessege = document.querySelector('#success-messege');
const stopwatchTime = document.querySelector('#stopwatch-time');

btn.addEventListener('click', runGame);

function runGame() {
 if ((btn.innerText = 'Play again')) {
     playAgain();
     fetchQuote();
     countownTimer();
     confirmQuote();
 } else {
     fetchQuote();
     countownTimer();
     confirmQuote();
 }
}

function fetchQuote() {
 fetch('https://api.quotable.io/random')
     .then((res) => {
         return res.json();
     })
     .then((data) => {
         textDisplay.innerText = data.content;
     });
}

function countownTimer() {

if (timer !== undefined) {
     clearInterval(timer);
 }
 var timeleft = 2;
 var downloadTimer = setInterval(function() {
     if (timeleft <= 0) {
         clearInterval(downloadTimer);
         document.getElementById('countdown').innerHTML = 'Start Typing!';
         input.classList.remove('displayNone');
         runningStopwatch.classList.remove('displayNone');
         begin();
     } else {
         document.getElementById('countdown').innerHTML = timeleft + ' seconds remaining';
     }
     timeleft -= 1;
 }, 1000);
}

function confirmQuote() {
 if ((countdown.innerHTML = 'Start typing!')) {
     input.addEventListener('keyup', function(event) {
         if (event.keyCode === 13) {
             if (textDisplay.innerText === input.value) {
                 btn.innerText = 'Play again';
                 // textBox.classList.add('displayNone');
                 hold();
             } else successMessege.innerText = 'Missed something there, try again!!';
         }
     });
 }
}

function playAgain() {
 textBox.classList.remove('displayNone');
 input.classList.add('displayNone');
 input;
 input.value = '';
 successMessege.innerText = '';
}

let ms = 0,
 s = 0,
 m = 0;
let timer;

let runningStopwatch = document.querySelector('.running-stopwatch');

function begin() {
 timer = setInterval(run, 10);
}

function run() {
 runningStopwatch.textContent =
     (m < 10 ? '0' + m : m) + ': ' + (s < 10 ? '0' + s : s) + ': ' + (ms < 10 ? '0' + ms : ms);
 ms++;
 if (ms == 100) {
     ms = 0;
     s++;
 }
 if (s == 60) {
     s = 0;
     m++;
 }
}

function hold() {
 clearInterval(timer);
 successMessege.innerText = `Nice job! You just typed in x seconds!`;
}

function stop() {
 (ms = 0), (s = 0), (m = 0);
 runningStopwatch.textContent =
     (m < 10 ? '0' + m : m) + ': ' + (s < 10 ? '0' + s : s) + ': ' + (ms < 10 ? '0' + ms : ms);
}

Answer 1

您没有正确处理clearInterval。

如果您成功结束游戏，则清除间隔仅。我的解决方案是：

[调用countownTimer()函数时，您要做的第一件事是检查间隔timer是否仍在运行。

function countownTimer() {
    if (timer !== undefined) {
        clearInterval(timer);
    }
    // [...]
}

接下来就是，每次调用begin()时都要开始间隔。

function begin() {
    timer = setInterval(run, 10);
}