skip to Main Content

I have a simple Bootstrap page that includes a 45 second countdown timer and a button which I intend to include on a bigger project later. The countdown timer will start on a click of the button.

What I wanted to do is that when I click on the button again within the 45 seconds countdown interval, the counter will reset. I am not able to do that. What I tried to do is to use the clearInterval function at the very beginning of the errorTimer function. But, it did not work.

Here are my codes:

// Timer for error message - 45 seconds.	
function startTimer(duration, display) {
  var timer = duration,
    minutes, seconds;
  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);
};
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>


<div class="container-fluid">

  <div class="row">
    <div class="col-md-12 mt-5">&nbsp;</div>
  </div>
  <div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4 text-center">
      <p id="time"></p>
    </div>
    <div class="col-md-4"></div>
  </div>
</div>

<button type="button" class="btn btn-info" onclick="errorTimer()">Submit  Button</button>

3

Answers


  1. As @Shidersz mentioned, you need to store the id associated with the interval and use that id to clear the interval before resetting the clock.

    // Timer for error message - 45 seconds.	
    var id = null;
    
    function startTimer(duration, display) {
      if (id !== null) {
        clearInterval(id);
        id = null;
      }
    
      var timer = duration,
        minutes, seconds;
      id = 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);
    };
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
    
    
    <div class="container-fluid">
    
      <div class="row">
        <div class="col-md-12 mt-5">&nbsp;</div>
      </div>
      <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4 text-center">
          <p id="time"></p>
        </div>
        <div class="col-md-4"></div>
      </div>
    </div>
    
    <button type="button" class="btn btn-info" onclick="errorTimer()">Submit  Button</button>
    Login or Signup to reply.
  2. You could stop the timer by clearing the interval:

    // Timer for error message - 45 seconds.    
    function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    var interval = 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);
        return function(){ clearInterval(interval); };
    }
    
    function errorTimer () {
        var fortyFiveSeconds = 60 * .75,
        var display = document.querySelector('#time');
        var stopper = startTimer(fortyFiveSeconds, display);
        setTimeout(stopper, 20 * 1000); // stop timer 20 seconds later.
    };
    

    I make use of a simple function returned by the startTimer function, that can be used to clear the interval at a later point.

    Login or Signup to reply.
  3. Use clearInterval like this

    ...
        // Timer for error message - 45 seconds.    
        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);
        };
        ...
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search