Как синхронизировать таймер обратного отсчета с функцией SetTimeOut в JavaScript - PullRequest
Новая
       7

Как синхронизировать таймер обратного отсчета с функцией SetTimeOut в JavaScript

0 голосов
/ 03 марта 2019

У меня есть простая страница начальной загрузки.Это начало более крупного проекта для детей, где они должны ответить на заданный вопрос.Вся страница указана здесь.

У меня две проблемы с кодом.Первая проблема заключается в том, что таймер не синхронизирован с функцией SetTimeOut ().То, как это должно работать, дети получат 45 секунд, чтобы ответить на каждый вопрос.Таймер обратного отсчета появится в верхней части кнопки, показывая, сколько времени осталось.И в фоновом режиме setTimeOut () будет работать, чтобы завершить тест через 45 секунд.Моя первая проблема - как только тест завершается через 45 секунд, как и было запланировано, таймер обратного отсчета не останавливается, а скорее сбрасывает себя еще на 45 секунд и продолжает работать.В этот момент мне бы хотелось, чтобы после завершения обратного отсчета вместо таймера появлялись символы «-: -», означающие, что времени больше не осталось.

Вторая проблема, которая у меня есть, заключается в том, чтоЯ хочу разрешить детям сбрасывать время, если они захотят, снова нажав кнопку в течение 45 секунд.Это прекрасно работает с таймером обратного отсчета, но не с функцией setTimeOut, которая будет завершаться через 45 секунд все время и не будет сбрасываться, как таймер.

Любая помощь по этим двум вопросам будет принята с благодарностью. 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<!-- Bootstrap -->
<link href="css/bootstrap-4.2.1.css" rel="stylesheet">
<style>
.TopDivMarg {
    margin-bottom: 50px;
}
</style>
</head>
<body>
<!-- body code goes here -->

<div class="container-fluid">
  <div class="row">
    <div class="col-md-12 TopDivMarg"></div>
  </div>

<!--    Quiz Group  -->

  <div class="row">
    <div class="col-xl-4"></div>
    <div class="col-xl-4">
      <p id="message" class="text-center">[Click on Button to Start Quiz.]</p>
        <p id="time"></p>
    </div>
    <div class="col-xl-4"></div>
  </div>

<!--    Button Group  -->
  <div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4">
      <button type="button" id="myBtn" class="btn btn-info">Start Quiz</button>
    </div>
    <div class="col-md-4"></div>
  </div>

<script>

  document.getElementById("myBtn").addEventListener("click", function(){
  document.getElementById("message").innerHTML = "What are the colors of the rainbow?";
  errorTimer();
  setTimeout(clearResultF, 45000);
});

// Visible Countdown Timer 
    var timerId;
    function startTimer(duration, display) {

    var timer = duration, minutes, seconds;
    if(timerId != undefined) {
        clearInterval(timerId)
    };

        timerId = setInterval(function () {
        minutes = parseInt(timer / 60, 10)
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;
        if (--timer < 0) {
            timer = duration;
        };
    }, 1000);
    };

    function errorTimer () {

        var fortyFiveSeconds = 60 * .75,
        display = document.querySelector('#time');
        startTimer(fortyFiveSeconds, display);
        };

    // Reset Timer

      function clearResultF() {
      document.getElementById("message").innerHTML = "[Click on the Button to Start the Quiz.]";
      };

</script>

1 Ответ

0 голосов
/ 03 марта 2019

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

событие javascript interval , продолжающееся вечно.Пока вы только сбрасываете переменную таймера, больше ничего не происходит с тем фактом, что интервал работает вечно.Чтобы остановить его, вам необходимо очистить его (как вы это делали в начале метода startTimer. Я предлагаю следующее обновление кода: 

display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
    timer = duration;
    clearInterval(timerId)
};

Это отлично работает с обратным отсчетомТаймер, но не с функцией setTimeOut, которая будет завершаться через 45 секунд все время и не будет сбрасываться, как таймер.

По той же причине, что и для интервального события, если вы хотите, чтобы ваш тайм-аут остановился, вам нужно очистить его (поэтому сохраните его в переменной, чтобы вы могли очистить его идентификатор, когда вам нужно).

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

var timerId;
var countId;

function startTimer(duration, display) {

    var timer = duration, minutes, seconds;

    if(timerId != undefined) {
        clearInterval(timerId)
    };
    if(countId!= undefined) {
        clearTimeout(countId)
    };

    countId = setTimeout(clearResultF, 45000);
    timerId = setInterval(function () { ...
...