Not able to bind setInterval inside for loop

Question

I am trying to execute a setInterval inside a for-loop , but instead of executing in interval it is executing at once.

In this example I tried with .bind()

var bck =['red','yellow'];
for(var i = 0;i<bck.length;i++){
   var num = i;
   console.log(num)
     setInterval(function() {
        $('.demoDiv').css('background',bck[num]);
        }.bind(num), 5000);
}

I also tried by creating a closure.

for(var i = 0;i<bck.length;i++){
   (function(i) {
     var _set=   setInterval(function(){
        $('.demoDiv').css('background',bck[i]);
        }, 5000)
    }(i));
}

Here is a JSFIDDLE

You're creating all the intervals at once (well, close enough), so they will all execute at nearly the same time 5 seconds later. — DBS, Jul 05 '16 at 10:24
The full content of your question must be **in** your question, not just linked. A fiddle is fine provided the content is also **here**. But preferably, use Stack Snippets (the `<>` toolbar button) for a runnable [mcve]. — T.J. Crowder, Jul 05 '16 at 10:24
I bet you really don't want `setInterval` here at all, you probably want `setTiemout`. — T.J. Crowder, Jul 05 '16 at 10:26

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

1

Why you hardcoding ? you dont need to use a loop, just the setInterval will do the trick

var bck = ['red', 'yellow'];
var i = 0;
setInterval(function() {
  $('.demoDiv').css('background', bck[i%2]);
  i++;
}, 5000)

.demoDiv {
  background: rebeccapurple;
  width: 200px;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="demoDiv">

</div>

Edit: Imporved by @Akshay Khandelwal, use modulus instead of if statemant.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 05 '16 at 10:26

elreeda

4,525
2
18
45

you could use modulus instead – Akshay Khandelwal Jul 05 '16 at 10:31
My main objective is to understand the working of setInterval/setTimeout inside loop. – brk Jul 05 '16 at 10:35
1

@user2181397: If that's your main objective, you'll want to read this: http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example The question would be a duplicate of that if it weren't for the timing aspect. – T.J. Crowder Jul 05 '16 at 10:40

score 0 · Answer 2 · answered Jul 05 '16 at 10:30

0

Instead of reseting i which is apparently a good idea, i chose to use a mathematical operation to achieve the same

var bck =['red','yellow'];
var i =0;
var _set=   setInterval(function(c) {
        $('.demoDiv').css('background',bck[i%2]); // Check the modulus value;
    i++;
}, 5000)

answered Jul 05 '16 at 10:30

Akshay Khandelwal

1,570
11
19

additional line of if condition in below answer removed. – Akshay Khandelwal Jul 05 '16 at 10:31
Well I know it , but my main objective is to understand the working of setInterval/setTimeout inside loop. – brk Jul 05 '16 at 10:33
in your code, what really happened is different intervals [2 in number] got set to execute after every 5 seconds which you did not expect. Something that you did not anticipate is that the for loop would end up immediately and have 2 different setintervals execute the interval almost consecutively without any delay. – Akshay Khandelwal Jul 05 '16 at 10:36
This tricked you in believing that only one interval is being executed. – Akshay Khandelwal Jul 05 '16 at 10:36
if you had not done `var _set` and use `_set` directly instead that would override the previous interval leading to execution of just one interval again, which you'd excpect. – Akshay Khandelwal Jul 05 '16 at 10:37
can you create a working jsfiddle with setInterval inside for loop – brk Jul 05 '16 at 10:39
I guess, no! That wont help unless your objective is to get the variable (i) inside the function there's no reason why you should use **for** and **closure** together. and no reason at all to use **setinterval** and **for** together in any situation. – Akshay Khandelwal Jul 05 '16 at 10:41

Not able to bind setInterval inside for loop

2 Answers2