1

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>

Improve this question
2
  • In order to use clearInterval, you have to assign setInterval to a variable and then use that variable as a pararmeter to clearInterval. You can probably use the answer at stackoverflow.com/questions/16599878/… Commented Mar 1, 2019 at 22:13
  • 3
    setInterval() returns an id for the created and running interval. You need to store it on a variable if you want to clear ir later. Then you can call clearInterval(<some_id>);. Commented Mar 1, 2019 at 22:13

3 Answers 3

Reset to default
2

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); }; ...
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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>

Improve this answer

Comments

1

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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.