JavaScript async callback and scope

Question

Consider the following example:

var cb = function (t) {
    console.log('callback -->' + t);
};

for(var i = 0; i<3; i++) {
    console.log(i);
    setTimeout(function(){
        cb(i);
    },1000);
}

Working example at jsfiddle

The output of this code snippet is:

0
1
2
callback ---> 3
callback ---> 3
callback ---> 3

Everything works as expected, for loop puts 3 callback calls into the event loop. By the end of the for loop i == 3 and when the callbacks get executed all of them print 3 because they contain the link to the i which is 3. How could this snippet be improved so when the callback gets executed it uses the actual value which was passed to it.

The output should be:

callback ---> 1
callback ---> 2
callback ---> 3

Thanks in advance.

Joseph · Accepted Answer · 2013-04-29 09:55:36Z

18

Create a closure so that the setTimeout handler will refer to the closure's local variable (which in this case, we also named i), not the i from the loop:

for (var i = 0; i < 3; i++) {
    (function (i) {
        console.log(i);
        setTimeout(function () {
            cb(i);
        }, 1000);
    }(i));
}

answered Apr 29, 2013 at 9:55

Joseph

120k31 gold badges186 silver badges238 bronze badges

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

Comments

xdazz · Accepted Answer · 2013-04-29 09:55:30Z

6

You could try .bind:

for(var i = 0; i<3; i++) {
    console.log(i);
    setTimeout(cb.bind(null, i),1000);
}

The demo.

The traditional way to handle this is to create a closure:

for(var i = 0; i<3; i++) {
    console.log(i);
    setTimeout((function(i){return function(){cb(i)}}(i)),1000);
}

answered Apr 29, 2013 at 9:55

xdazz

161k38 gold badges255 silver badges278 bronze badges

1 Comment

Igor Malyk Over a year ago

Thanks a lot for the info on .bind I'll ponder over the documentation about it. Bind is ES5 only so I can't use it yet. Your closure solution works fine however Joseph posted similar solution first so I'm afraid I'll choose his answer. Nevertheless, thanks for sharing your knowledge !

Damask · Accepted Answer · 2013-04-29 10:15:38Z

3

A frequent question. Let's try to use some features of future of JS. I mean let. It creates local scope variable and you don't need to use a closure or another trick. But now it works only in FF (i'm using 20.0.1)

for(var i = 0; i<3; i++) {
    console.log(i);
    let a = i;
    setTimeout(function(){               
        cb(a);
    },1000);
}

answered Apr 29, 2013 at 10:15

Damask

1,2941 gold badge14 silver badges25 bronze badges

Comments

l2aelba · Accepted Answer · 2013-04-29 09:57:00Z

1

I will just use setTimeout() in your cb's functoin

var cb = function (t) {
  setTimeout(function(){
    console.log('callback -->' + t);
  },1000);
};


for(var i = 0; i<3; i++) {
    console.log(i);
        cb(i);
}

answered Apr 29, 2013 at 9:57

l2aelba

22.3k23 gold badges108 silver badges145 bronze badges

2 Comments

John Dvorak Over a year ago

Nice, but there's no need for cb to not be defined inline ;-)

Igor Malyk Over a year ago

Unfortunately this can't be done. Callback is called by the async function but it doesn't contain one itself.

Collectives™ on Stack Overflow

JavaScript async callback and scope

4 Answers 4

Comments

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related