Tag Archives: setinterval

JavaScript: How To Trigger at a Specific Time CodeUnit 23 JAN 2013

Sometimes you want your web page to do something at a specific time. For example, perhaps you want your page to force a reload at midnight, say if it is being used as a monitor screen and you want to reload it in order to reset browser memory usage.

Anyway, triggering at a specific time using JavaScript turns out to be a fairly simple task, thanks to the useful timing function, setTimeout.

The trick is simple enough. On page load, grab the current timestamp using the Date() object. Then create a new Date() object and manually set its hour and minutes to match the time you want your event to trigger. The difference between the two objects’ times expressed in milliseconds is then used to create a setTimeout event, which naturally will trigger when those milliseconds are up.

Clever.

The following example forces a page reload just before midnight:

//the window reload function. you could of course do anything here
function forceMidnightPageReload() {
        window.location.reload(true);
}

//helper function to build up the desire time trigger
function forceMidnightPageReloadGetTargetTime(hour,minute) {
  var t = new Date();
  t.setHours(hour);
  t.setMinutes(minute);
  t.setSeconds(0);
  t.setMilliseconds(0);
  return t;
}

//get your offset to wait value
var timetarget = forceMidnightPageReloadGetTargetTime(23,59).getTime();
var timenow =  new Date().getTime();
var offsetmilliseconds = timetarget - timenow;

//if it isn't midnight yet, set a timeout.
if (offsetmilliseconds >= 0){
setTimeout(function(){forceMidnightPageReload();}, offsetmilliseconds);
}

Useful.

JavaScript: Execute a Function every Couple of Seconds with setInterval CodeUnit 14 NOV 2011

With pages being very much dynamic these days, developers often need a page to do something every now and then, so as to keep the viewer’s attention or to update the page without having to do a page reload – or perhaps just reload the page every couple of seconds!

Anyway, a simple way of achieving this is through the very useful Javascript Window setInterval() method, which basically calls a function or evaluates an expression at specified intervals (in milliseconds).

Once initiated, the setInterval() method will keep executing until the timer is cleared with a call to clearInterval() – or the window itself is actually closed!

Note the ID value returned by the call to setInterval – you’ll need this parameter if you want to put a stop to it with clearInterval!

Supported by all major browsers, the syntax to run the method is:

setInterval(code,millisec);

The following is a simple example that displays the time on a page and then subsequently updates that time every second, with a control button to stop the clock.

<html>
<body>
<input type=”text” id=”clock” />
<script language=javascript>
var int=self.setInterval(function(){clock();},1000);
function clock()
  {
  var d=new Date();
  var t=d.toLocaleTimeString();
  document.getElementById(“clock”).value=t;
  }
</script>
</form>
<button onclick=”int=window.clearInterval(int)”>Stop</button>
</body>
</html>

Nifty