Возникла проблема сброса JS секундомера - PullRequest
Новая
       6

Возникла проблема сброса JS секундомера

0 голосов
/ 05 марта 2020

Я сделал небольшую игру для набора текста, которая показывает какой-то случайный текст, и вам нужно набирать то же самое, чтобы вы могли проверить скорость набора текста. пользователи могут играть снова и снова, проблема в том, что когда пользователь снова начинает играть, секундомер не запускается, как в первый раз.

Может ли кто-нибудь помочь мне с перезагрузкой секундомера каждый раз, когда пользователь нажимает кнопку повторного воспроизведения?

[полный код здесь] (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);
}

1 Ответ

1 голос
/ 05 марта 2020

Вы неправильно обрабатываете clearInterval.

Вы очищаете интервал только , если один успешно завершил игру. Мое решение было бы:

При вызове функции countownTimer() первое, что вы должны сделать, это проверить, работает ли интервал timer. 

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

Следующим шагом будет запуск интервала каждый раз, когда вызывается begin(). 

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