jQuery countdown timer, auto-refresh after it hits 0

Question

I haven't been able to find any good examples , but I'm looking to find some simply jQuery examples for a countdown of 30 seconds which will essentially refresh the current page once it hits 0.

Each count should be displayed in a <div> element.

Answer 1

Here's a very simple implementation to get you the right idea,

http://jsfiddle.net/2jajy50p/

$(window).ready( function() {

    var time = 30

    setInterval( function() {

        time--;

        $('#time').html(time);

        if (time === 0) {

            location.reload();
        }    


    }, 1000 );

});

Per request, here's an explanation of what's going on: Upon window load, setInterval sets the duration for each anonymous function call. Every 1000 milliseconds (1 second) the variable time is decremented by 1. Each call, the new time is appended to the DOM using the jQuery .html() method. Within the same function there is one conditional statement which determines if time === 0; once this evaluates to true, the page is reloaded using the location.reload() method.

EDIT

Per a comment, asking whether there was a way to make the timer run once, even after the page reloads:

I suggested using localStorage (which I will admit isn't perfect) but anywhere, here is a working implementation.

EVEN NEWER EDIT

I came back to this and was looking over my answer. And because I'm a nerd, I wanted to create a more dynamic, ingestible solution:

var timerInit = function(cb, time, howOften) {
  // time passed in is seconds, we convert to ms
  var convertedTime = time * 1000;
  var convetedDuration = howOften * 1000;
  var args = arguments;
  var funcs = [];

  for (var i = convertedTime; i > 0; i -= convetedDuration) {
    (function(z) {
      // create our return functions, within a private scope to preserve the loop value
      // with ES6 we can use let i = convertedTime
      funcs.push(setTimeout.bind(this, cb.bind(this, args), z));

    })(i);
  }

  // return a function that gets called on load, or whatever our event is
  return function() {

    //execute all our functions with their corresponsing timeouts
    funcs.forEach(function(f) {
      f();
    });
  };

};

// our doer function has no knowledge that its being looped or that it has a timeout
var doer = function() {
  var el = document.querySelector('#time');
  var previousValue = Number(el.innerHTML);
  document.querySelector('#time').innerHTML = previousValue - 1;
};


// call the initial timer function, with the cb, how many iterations we want (30 seconds), and what the duration between iterations is (1 second)
window.onload = timerInit(doer, 30, 1);

http://jsbin.com/padanuvaho/edit?js,output