CODEWITHSUNDEEP
javascript
m74
m74

Reputation: 3

How to make this countdown repeat after the time runs out?

I'm very new to Javascript and I found myself stuck with this issue. I want to make this countdown repeat after the time runs out, however I'm not really sure how to do it, and my attempts to make it work failed. Would appreciate help how to do it, Thanks.

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) {
             // here's the problem. not sure how to make it repeat
        }
    }, 1000);
}

window.onload = function () {
    var fiveMinutes = 60 * 5,
        display = document.querySelector('#time');
    startTimer(fiveMinutes, display);
};

Tried using clearInterval() and setTimeout() but instead of it working the countdown either went past 00:00 (00:0-1 and so on) or just didn't work at all.

Upvotes: 0

Views: 298

Answers (2)

Stephen Quan
Stephen Quan

Reputation: 26324

What you're describing is a forever countdown.

Note that eventhough you specify 1000 in the setInterval(). The timer isn't precise, so the callback may fire less than or greater than 1000ms. It is much safer to capture the startTime and then calculate the currentTime when the callback fires and measure the elapsedTime. This will give a true indication of elapsed time regardless of whether the timer is running slow or fast.

Because of the reset requirement. I actually infer that the timer is an infinite loop. We run it forever. There is no description as to when the timer is aborted, so, we just continue measuring currentTime and note elapse.

I use elapsedTime = (currentTime - startTime) / 1000 to calculate the elapsed time in seconds. Then, I elapsed % duration to make the counter stop at the duration and reset. Finally, I flip the math countdown = duration - 1 - (elapsedTime % duration) so instead of counting up, it counts down.

We then break down countdown into the minutes and seconds components.

Below is a fully working example that uses jQuery.

function startTimer(duration, display) {
    let startTime = Date.now();
    setInterval(function() {
        let currentTime = Date.now();
        let elapsedTime = Math.floor((currentTime - startTime) / 1000);
        let countdown = duration - 1 - (elapsedTime % duration);
        let minutes = Math.floor(countdown / 60).toString().padStart(2, "0");
        let seconds = (countdown % 60).toString().padStart(2, "0");
        display.text(minutes + ":" + seconds);
    }, 1000 );
}


let fiveMinutes = 60 * 5;
let display = $("#time");
startTimer(fiveMinutes, display);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label id="time">mm:ss</label>

Upvotes: 0

Jim
Jim

Reputation: 675

You can reset timer:

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);
}

Upvotes: 0

Related Questions