Call function every full hour

Question

I want to call a jquery function every full hour. So 11:00, 12:00, 13:00 etc.

Here is the function:

function flipIt() {
    $('#flip').addClass('animate pulse');
    $('#flip').removeClass('animate pulse').delay(1500);
}

How can I call it every full hour?

Answer 1

You can do :

setInterval(function(){
  
  if(new Date().getMinutes() === 0) {
    flipIt()
  }
},60000)

// for testing
setInterval(function(){
  if(new Date().getSeconds() === 0) {
    alert("new minute !");
  }
},1000)

function flipIt() {
    $('#flip').addClass('animate pulse');
    $('#flip').removeClass('animate pulse').delay(1500);
}

Answer 2

Here is an approach which depends on a dynamic interval. The following function will set the timeout depending on how much time is left to the full hour:

function getDelay(){
    var date = new Date();
    var hour = date.getMinutes();
    return (60 - hour) * 60 * 1000; //get the milliseconds until the next full hour
}

delay = getDelay();
var dynamicInterval = function(){
    clearInterval(interval); //stop the current interval
    delay = getDelay();
    interval = setInterval(dynamicInterval, delay); //set the new interval with the new delay
}
var interval = setInterval(dynamicInterval, delay); //initial start of the interval

Demo

Note: the demo deals with seconds instead of minutes.