重置 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);
}