Page refresh when countdown ends

Question

I have a countdown javascript script, and I want my page to refresh once when the countdown ends.

Here is my complete code.

//JavaScript code for countdown function getTimeRemaining(endtime) { var t = Date.parse(endtime) - Date.now(); var seconds = Math.floor((t / 1000) % 60); var minutes = Math.floor((t / 1000 / 60) % 60); var hours = Math.floor((t / (1000 * 60 * 60)) % 24); var days = Math.floor(t / (1000 * 60 * 60 * 24)); return { 'total': t, 'days': days, 'hours': hours, 'minutes': minutes, 'seconds': seconds }; } function initializeClock(id, endtime) { var clock = document.getElementById(id); var daysSpan = clock.querySelector('.days'); var hoursSpan = clock.querySelector('.hours'); var minutesSpan = clock.querySelector('.minutes'); var secondsSpan = clock.querySelector('.seconds'); function updateClock() { var t = getTimeRemaining(endtime); if (t.total < 0) { document.getElementById("clockdiv").className = "hidden-div"; document.getElementById("timeIsNow").className = "visible-div"; clearInterval(timeinterval); return true; } daysSpan.innerHTML = t.days; hoursSpan.innerHTML = ('0' + t.hours).slice(-2); minutesSpan.innerHTML = ('0' + t.minutes).slice(-2); secondsSpan.innerHTML = ('0' + t.seconds).slice(-2); } updateClock(); var timeinterval = setInterval(updateClock, 1000); } var deadline = '2015-12-31T13:00:00+02:00'; console.log(deadline); initializeClock('clockdiv', deadline); 

This is the code I want to use to update:

 location.reload(); 

If I add this update code to this part of the code below, the operation will update.

 if (t.total < 0) { document.getElementById("clockdiv").className = "hidden-div"; document.getElementById("timeIsNow").className = "visible-div"; clearInterval(timeinterval); location.reload(); //Added this one. return true; } 

However, this update method is updated every second after the countdown ends. But I want it to be updated only once when it hits 0.

What have i tried?

I tried to create another if statement to refresh the page when t.total == 0 , for example:

 if (t.total == 0) { document.getElementById("clockdiv").className = "hidden-div"; document.getElementById("timeIsNow").className = "visible-div"; clearInterval(timeinterval); location.reload(); //Added this one. return true; } 

But for some reason this did not work.

So, I also tried with if (t.total = 0) and if (t.total === 0) , but still can't handle it.

Can someone give me a hand to refresh the page when the counter hit 0?

Here is jsFiddle for you if you want to play: https://jsfiddle.net/qv6rbyLo/1/

Answer 1

The problem is that when you refresh the page, you start the clock again. Then it ends immediately, causing another update.

You need to check the possibility that the deadline has already passed, and then update only if the deadline has not been met when you started the clock.

Here's updated initializeClock (see comments):

 function initializeClock(id, endtime, callback) { // <== Add callback var clock = document.getElementById(id); var daysSpan = clock.querySelector('.days'); var hoursSpan = clock.querySelector('.hours'); var minutesSpan = clock.querySelector('.minutes'); var secondsSpan = clock.querySelector('.seconds'); var ranOnce = false; // <== Haven't run once yet var t = getTimeRemaining(endtime); function updateClock() { var t = getTimeRemaining(endtime); if (t.total < 0) { document.getElementById("clockdiv").className = "hidden-div"; document.getElementById("timeIsNow").className = "visible-div"; clearInterval(timeinterval); callback(ranOnce); // <== Tell callback whether we ran return true; } ranOnce = true; // <== Flag that we ran at all daysSpan.innerHTML = t.days; hoursSpan.innerHTML = ('0' + t.hours).slice(-2); minutesSpan.innerHTML = ('0' + t.minutes).slice(-2); secondsSpan.innerHTML = ('0' + t.seconds).slice(-2); } var timeinterval = setInterval(updateClock, 1000); // <=== Important that this is before the first call to updateClock updateClock(); } 

... which you would use as follows:

 initializeClock('clockdiv', deadline, function(ranOnce) { if (ranOnce) { location.reload(); } }); 

Here is a live example with a deadline in the future: https://jsfiddle.net/mzabLrvy/

And where is the deadline in the past: https://jsfiddle.net/mzabLrvy/1/

Answer 2

You can try using the GET parameter to not refresh the page.

Add this to js code:

 var _get = (function(a) { if (a == "") return {}; var b = {}; for (var i = 0; i < a.length; ++i) { var p=a[i].split('=', 2); if (p.length == 1) b[p[0]] = ""; else b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " ")); } return b; })(window.location.search.substr(1).split('&')); 

This will give you neat access to the GET parameters from js.

Then you can write the function of the update page as follows:

 function refreshPage(){ if (typeof _get["isRefreshed"] === "undefined") return; window.location.href = "index.htm?isRefreshed=1"; // "index.htm" is the current page of course }