How To Use Setinterval Or Settimeout With A For Loop?

I am trying to set an interval when some code runs but only need to do it based on the number of elements there are. Here's a quick example: 5 total elements Run code once every 20

Solution 1:

Look at this example: http://juixe.com/techknow/index.php/2005/10/28/put-javascript-to-sleep/

Solution 2:

Here's some code I did for animating images using jQuery:

var enter = 500;
var show = 4000;
var exit = 300;
var direction1 = "right"; 
var direction2 = "left";
var logo = document.getElementById('Box1').getElementsByTagName('img');
varNum = $('#Box1 img').length;
var time_each = (enter+show+exit);
functionstartBox1(){
for(x=0;x<=Num-1;x++){
Box1(x);
}
}  
functionBox1(x){
var buffer = time_each*x;
$(logo[x]).delay(buffer).show("slide", { direction: direction1 }, enter).delay(show).hide("slide", { direction: direction2 }, exit);
}
$(function(){
startBox1();
setInterval("startBox1()",(time_each)*Num);
});

The trick was to set a buffer which equaled the time it took for each animation by the index of the current animation. The FOR loop runs each code immediately; the .delay() action and the buffer variable makes it appear as if each animation was happening one after the other. Then setInterval() recalls the FOR loop after every animation is complete. It restarts the process continuously.

Solution 3:

You have to define a function, and inside the function it needs to set a timeout on itself. Like this:

var els = [1, 2, 3, 4, 5];

((functionprocess_els(el_index) {
  var el = els[el_index];

  // do stuff to el hereconsole.log(el);
  // do stuff to el aboveif (el_index + 1 < els.length) {
    setTimeout(function() { process_els(el_index + 1); }, 20000);
  }
})(0);