What is the best way to implement a 5-second delay after the timer reaches 00:00?

Question

What is the best way to implement a 5-second delay after the timer reaches 00:00?

I am in the process of creating a countdown timer for an application. Once the timer reaches 00:00, I would like to add a 5-second delay before it starts counting down again. How can I achieve this using setTimeout()?

function initiateTimer(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);
    duration = timer;
}

javascript settimeout countdowntimer

Answer 1

Answer №1

If you want to ensure that only positive numbers are displayed, consider wrapping the line timer = duration; in a function and passing it to setTimeout. This way, the updated time will only be shown if timer >= 0, preventing negative numbers from appearing.

const display = document.querySelector('#display')

function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
            if(timer >= 0){
            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) {
                
                setTimeout(()=>timer = duration,5000)
            }
    }, 1000);
    duration = timer;
}

startTimer(10,display)

<div id="display"></div>

Answer 2

If you want to ensure that only positive numbers are displayed, consider wrapping the line timer = duration; in a function and passing it to setTimeout. This way, the updated time will only be shown if timer >= 0, preventing negative numbers from appearing.

const display = document.querySelector('#display')

function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
            if(timer >= 0){
            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) {
                
                setTimeout(()=>timer = duration,5000)
            }
    }, 1000);
    duration = timer;
}

startTimer(10,display)

<div id="display"></div>

Answer 3

Answer №2

Keep the interval running until you take action to clear it. When the timer reaches zero, clear the interval and then initiate a timeout to restart it. Remember to store the interval handle in a variable if you want to clear it later. Use recursion for this task:

function startTimer(duration, display) {
  var timer = duration, minutes, seconds;
  var timerInterval = 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) {
        window.clearInterval(timerInterval);
        window.setTimeout(() => startTimer(duration, display), 5000);
    }
  }, 1000);
}

Answer 4

Keep the interval running until you take action to clear it. When the timer reaches zero, clear the interval and then initiate a timeout to restart it. Remember to store the interval handle in a variable if you want to clear it later. Use recursion for this task:

function startTimer(duration, display) {
  var timer = duration, minutes, seconds;
  var timerInterval = 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) {
        window.clearInterval(timerInterval);
        window.setTimeout(() => startTimer(duration, display), 5000);
    }
  }, 1000);
}

Answer 5

Answer №3

Greetings from Stackoverflow! To meet your objective, consider incorporating a secondary timer within your existing code. Here's an example:

function initiateTimer(length, view) {
    var timer = length, 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;

           view.textContent = minutes + ":" + seconds;

            if (--timer < 0) {
                setTimeout(function(){
                    timer = length;
                },5000); // Implement 5-second delay
            }
    }, 1000);
    length = timer;
}

Answer 6

Greetings from Stackoverflow! To meet your objective, consider incorporating a secondary timer within your existing code. Here's an example:

function initiateTimer(length, view) {
    var timer = length, 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;

           view.textContent = minutes + ":" + seconds;

            if (--timer < 0) {
                setTimeout(function(){
                    timer = length;
                },5000); // Implement 5-second delay
            }
    }, 1000);
    length = timer;
}

Answer 7

Answer №4

This method does not rely on setTimeout as it is deemed unnecessary. Instead, it simply counts down to -5 (without updating the display) before resetting.

function initiateTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
            if (timer >= 0) {
                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;
            }
            
            --timer;
            
            if (timer <= -5) {
                timer = duration;
            }
    }, 1000);
}

window.onload = function() {
  initiateTimer(10, document.getElementById('display'));
};

<span id="display"></span>

Answer 8

This method does not rely on setTimeout as it is deemed unnecessary. Instead, it simply counts down to -5 (without updating the display) before resetting.

function initiateTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
            if (timer >= 0) {
                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;
            }
            
            --timer;
            
            if (timer <= -5) {
                timer = duration;
            }
    }, 1000);
}

window.onload = function() {
  initiateTimer(10, document.getElementById('display'));
};

<span id="display"></span>

What is the best way to implement a 5-second delay after the timer reaches 00:00?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The autocomplete feature in Atom is not functioning as expected

Generating dynamic forms using JSON Schema in Angular 8 can greatly streamline the form creation process

What is the best way to extract a JSON value and use it across multiple functions?

Sort the results by total count in Mongoose Express Node.js after grouping by id

Using Angular's ng-repeat prefilter with JavaScript

Struggling with making react-hook-form correctly validate an email address

Loading 3D models in Three.js from the cache

Ways to adjust text color after clicking on an element

Ensure that the nested div maintains its height consistently across all three columns

Utilize jQuery to deactivate all click interactions except for the scrollbar

Tips for patiently anticipating an object to undergo asynchronous modifications?

Ways to display a different landing page when navigating to the homepage of a website

`Turn nested JSON into a formatted list using jquery`

Ordering Algorithm in AJAX Grid

Create a search feature based on names utilizing Node Express in conjunction with SQL database

Automated browsing: identifying the difference between AJAX and iframes

How can you personalize the background color of a Material-UI tooltip?

What is the best way to trigger a child function from the parent component in React?

Ways to extract a Bearer Token from an Authorization Header using JavaScript (Angular 2/4)

Learn how to toggle between two different image sources with a single click event in JavaScript