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.

Answer 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);   }); }); 

Answer 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 :).'); }