setInterval/setTimeOut function with for loop showing unexpected results

Question

for (var i = 0; i <= 2; ++i) {
    display_para(i);
};

function display_para(i){

    setInterval(function(){
        console.log(i);

        //Stuff to be done

    }, 1500 + i * 2000);
};


Expected result:
0 1 2 ; 0 1 2; 0 1 2 and so on.

Whereas it is showing different output as shown in the screenshot.

I could not understand where am I going wrong.

every 1.5 seconds, 0 will be output. every 3.5 seconds a 1, and every 5.5 seconds a 2 ... the timings are independent of each other (i.e. one interval doesn't wait for another — Jaromanda X
– Jaromanda X, Commented Jan 22, 2016 at 4:22

Arun P Johny · Accepted Answer · 2016-01-22 04:27:03Z

1

That is because how you have setup the timers, the 0 call will execute in every 1500ms, 1 call in every 3500ms and 2 call in every 5500ms.

One solution is to use a single inteval where based on a counter you decide the value to be printed like

var i = 0;
setInterval(function() {
  display_para(i);
  if (++i > 2) {
    i = 0;
  }
}, 1500);

function display_para(i) {
  document.body.innerHTML += i + '<br />'
};

answered Jan 22, 2016 at 4:27

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vicky Gonsalves · Accepted Answer · 2016-01-22 04:30:45Z

1

You probably need this:

 var i = -1;

 setInterval(function() {
   i = i > 1 ? 0 : ++i;
   console.log(i);
 }, 1500)

answered Jan 22, 2016 at 4:30

Vicky Gonsalves

11.8k3 gold badges39 silver badges58 bronze badges

Comments

Sudipta Kumar Maiti · Accepted Answer · 2016-01-22 04:38:26Z

1

You can't expect 0 1 2 in a sequence because there are three setInterval() running simultaneously in a different time interval. It's only possible if time interval is uniform like:

function display_para(i) {
        setInterval(function () {
            console.log(i);
        }, 200);
};

answered Jan 22, 2016 at 4:38

Sudipta Kumar Maiti

1,7091 gold badge13 silver badges19 bronze badges

Comments

traktor · Accepted Answer · 2016-01-22 05:03:33Z

1

The for loop expands to:

display_para(0);
display_para(1);
display_para(2);

The setInterval timers created:

log 0 every 1500 ms
log 1 every 3500 ms
log 2 every 5500 ms

So

timer 0 fires at: 1500   3000   4500  6000  7500 
timer 1 fires at:           3500        7000
timer 2 fires at:                 5500

giving

Expected result:   0     0  1   0 2   0 1   0

answered Jan 22, 2016 at 5:03

traktor

19.7k5 gold badges37 silver badges56 bronze badges

Collectives™ on Stack Overflow

setInterval/setTimeOut function with for loop showing unexpected results

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related