javascript - Have a refresh timer show a text when reaching 0 instead of continuing negative countdown

Question

With the following code, the timer countdown in negative -1, -2, -3, -4 etc. while fetching the new data / reloading the site.

Is it possible when it reaches 0 to have it show the string "Refreshing site.." instead of the negative countdown?

(function countdown(remaining) {
    if(remaining <= 0)
        location.reload(true);
    document.getElementById('countdown').innerHTML = remaining;
    setTimeout(function(){ countdown(remaining - 1); }, 1000);
})(5); // 5 seconds

Answer 1

You can add an extra line of code to the if statement you already have to change the innerHTML of the countdown div to "Refreshing Site...".

Then add an else statement so that when remaining is greater than 0 the countdown innerHTML will be set to the time remaining and the setTimeout function will be set to run.

Because setTimeout is contained in the else, that line won't run once the timer hits 0 so the countdown function won't get called again.

(function countdown(remaining) {
        if(remaining <= 0)
        {
            location.reload(true);
            document.getElementById('countdown').innerHTML = "Refreshing Site...";
        }
        else
        {
            document.getElementById('countdown').innerHTML = remaining;
            setTimeout(function(){ countdown(remaining - 1); }, 1000);
        }
    })(5); // 5 seconds

<div id="countdown"></div>