How to synchronize countdown timer with setTimeOut function in JavaScript

Question

I have a simple Bootstrap page. It is the beginning of a bigger project for children where they have to answer a timed quiz. The entire page is listed here.

I have two problems with the code so far. First problem is that the Timer is not synchronized with setTimeOut() function. The way this is supposed to work, the kids will get 45 second time interval to answer each question. A countdown Timer will show up on the top of the button indicating how much time is left. And, in the background, the setTimeOut() will work to terminate the quiz after 45 seconds.

My first problem is once the quiz is terminated after the 45 seconds as designed, the Countdown Timer does not stop but rather resets itself to another 45 second and keep going. I would like at this point that once the countdown is ended the following "--:--" symbols show up in place of the Timer signifying that no more time is left.

The second issue I have is that I want to allow the children to reset the time if they wanted to by clicking on the button again within the 45 seconds interval. This works fine with the Countdown Timer but not with the setTimeOut function which will terminate after 45 seconds all the time and will not reset like the Timer.

<!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>

hugodecasta hugodecasta · Accepted Answer · 2019-03-03T00:18:21

My first problem is once the quiz is terminated after the 45 seconds as designed, the Countdown Timer does not stop but rather resets itself to another 45 second and keep going

By design a javascript interval event while going on forever. While you are only resetting the timer variable, nothing else happens to the fact that the interval runs forever. In order to stop it, you will need to clear it (like you did at the beginning of the startTimer method. I suggest this code update:

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

This works fine with the Countdown Timer but not with the setTimeOut function which will terminate after 45 seconds all the time and will not reset like the Timer.

For the same reason as for the interval event, if you want your timeout to stop, you need to clear it (so store it in a variable so that you can clear its id when you need to).

One design issue i might point is that the timeout setting should occure un the startTimer method so that you can manage all your timers in the same place. I suggest the following update:

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 () { ...

How to synchronize countdown timer with setTimeOut function in JavaScript

1 Answers