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

重置 JS 秒表时出现问题

Having issue resetting JS stopwatch

javascript

stopwatch