javascript – What’s the easiest way to call a function every 5 seconds in jQuery?

The Question :

560 people think this question is useful

JQuery, how to call a function every 5 seconds.

I’m looking for a way to automate the changing of images in a slideshow.

I’d rather not install any other 3rd party plugins if possible.

The Question Comments :
  • +1 for “I’d rather not install any 3rd party plugins if possible.”
  • @nickf: Because it’s humorous as jQuery is already 3rd-party? (But not really, because I’m sure he’s using jQuery for other stuff already)
  • @Mark, hehe no I wasn’t being sarcastic, it’s just that I see a lot of people jump straight to plugins even though their problem could be solved with a couple of lines of plain javascript.
  • A couple of lines of quirky hacks and you never know in which browsers it will work.
  • Note that for those looking to use this technique in combination with an AJAX request – DON’T DO IT THIS WAY. Having every user on your page call your server every N seconds is equivalent of DDOSing yourself. If you need to keep the server and UI in sync, use WebSockets instead.

The Answer 1

998 people think this answer is useful

You don’t need jquery for this, in plain javascript, the following will work!

window.setInterval(function(){
  /// call your function here
}, 5000);

To stop the loop you can use

clearInterval() 

The Answer 2

116 people think this answer is useful

you could register an interval on the page using setInterval, ie:

setInterval(function(){ 
    //code goes here that will be run every 5 seconds.    
}, 5000);

The Answer 3

46 people think this answer is useful

A good example where to subscribe a setInterval(), and use a clearInterval() to stop the forever loop:

function myTimer() {
    console.log(' each 1 second...');
}

var myVar = setInterval(myTimer, 1000);

call this line to stop the loop:

 clearInterval(myVar);

The Answer 4

45 people think this answer is useful

Just a little tip for the first answer. If your function is already defined, reference the function but don’t call it!!! So don’t put any parentheses after the function name. Just like:

my_function(){};
setInterval(my_function,10000);

The Answer 5

34 people think this answer is useful

The functions mentioned above execute no matter if it has completed in previous invocation or not, this one runs after every x seconds once the execution is complete

// IIFE
(function runForever(){
  // Do something here
  setTimeout(runForever, 5000)
})()

// Regular function with arguments
function someFunction(file, directory){
  // Do something here
  setTimeout(someFunction, 5000, file, directory)
  // YES, setTimeout passes any extra args to
  // function being called
}

The Answer 6

11 people think this answer is useful

Both setInterval and setTimeout can work for you (as @Doug Neiner and @John Boker wrote both now point to setInterval).
See here for some more explanation about both to see which suites you most and how to stop each of them.

The Answer 7

5 people think this answer is useful

you can use window.setInterval and time must to be define in miliseconds, in below case the function will call after every single second (1000 miliseconds)

<script>
  var time = 3670;
window.setInterval(function(){

  // Time calculations for days, hours, minutes and seconds
    var h = Math.floor(time / 3600);
    var m = Math.floor(time % 3600 / 60);
    var s = Math.floor(time % 3600 % 60);

  // Display the result in the element with id="demo"
  document.getElementById("demo").innerHTML =  h + "h "
  + m + "m " + s + "s ";

  // If the count down is finished, write some text 
  if (time < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }

  time--;
}, 1000);


</script>

Add a Comment