Calling an asynchronous function within a for loop in JavaScript

Question

I have the following code:

for(var i = 0; i < list.length; i++){
    mc_cli.get(list[i], function(err, response) {
        do_something(i);
    });
}

mc_cli is a connection to a memcached database. As you can imagine, the callback function is asynchronous, thus it may be executed when the for loop already ended. Also, when calling in this way do_something(i) it always uses the last value of the for loop.

I tried with a closure in this way

do_something((function(x){return x})(i)) 

but apparently this is again using always the last value of the index of the for loop.

I also tried declaring a function before the for loop like so:

var create_closure = function(i) {
    return function() {
        return i;
    }
}

and then calling

do_something(create_closure(i)())

but again without success, with the return value always being the last value of the for loop.

Can anybody tell me what am I doing wrong with closures? I thought I understood them but I can't figure why this is not working.

Solution 1

Since you're running through an array, you can simply use forEach which provides the list item, and the index in the callback. Iteration will have its own scope.

list.forEach(function(listItem, index){
  mc_cli.get(listItem, function(err, response) {
    do_something(index);
  });
});

Solution 2

This is the asynchronous-function-inside-a-loop paradigm, and I usually deal with it using an immediately-invoked-anonymous-function. This ensures that the asynchronous functions get called with the correct value of the index variable.

Okay, great. So all the asynchronous functions have been started up, and the loop exits. Now, there is no telling when these functions will complete, due to their asynchronous nature, or in what order they will complete. If you have code that needs to wait until all these functions have completed before executing, I recommend keeping a simple count of how many functions have finished:

var total = parsed_result.list.length;
var count = 0;

for(var i = 0; i < total; i++){
    (function(foo){
        mc_cli.get(parsed_result.list[foo], function(err, response) {
            do_something(foo);
            count++;
            if (count > total - 1) done();
        });
    }(i));
}

// You can guarantee that this function will not be called until ALL of the
// asynchronous functions have completed.
function done() {
    console.log('All data has been loaded :).');
}

Solution 3

I know this is a old thread but anyway adding my answer. ES2015 let has the feature of rebinding the loop variable on each iteration, so it maintains the value of loop variable in asynchronous callbacks, so you can try the below one:

for(let i = 0; i < list.length; i++){
    mc_cli.get(list[i], function(err, response) {
        do_something(i);
    });
}

But anyway, it's better to use forEach or create a closure using immediately-invoked-function, since let is ES2015 feature and might not be support all browsers and implementations. From here under Bindings ->let->for/for-in loop iteration scope I can see it isn't supported till Edge 13 and even till Firefox 49 (I haven't checked in these browsers). It even says it's not supported with Node 4, but I personally tested and it seems it is supported.

Solution 4

You were pretty close, but you should pass the closure to get instead of putting it inside the callback:

function createCallback(i) {
    return function(){
        do_something(i);
    }
}


for(var i = 0; i < list.length; i++){
    mc_cli.get(list[i], createCallback(i));
}

Solution 5

Try this, using the async/await syntax and Promise

(async function() {
    for(var i = 0; i < list.length; i++){
        await new Promise(next => {
            mc_cli.get(list[i], function(err, response) {
                do_something(i); next()
            })
        })
    }
})()

This will stop the loop in each cycle until the next() function is triggered

View more solutions