Calling an asynchronous function within a for loop

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

Using ES6 (typescript) you can use the benefits of async and await:

let list: number[] = [1, 2, 3, 4, 5];

// this is async fucntion
function do_something(counter: number): Promise<number> {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('called after ' + counter + ' seconds');
            resolve(counter);
        }, counter * 1000);
    })
}
async function foo() {
    // itrate over list and wait for when everything is finished
    let data = await Promise.all(list.map(async i => await do_something(i)));

    console.log(data);
}

foo();

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

Answer 3

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

Answer 4

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.

Answer 5

ES2017: You can wrap the async code inside a function(say XHRPost) returning a promise( Async code inside the promise).

Then call the function(XHRPost) inside the for loop but with the magical Await keyword. :)

let http = new XMLHttpRequest();
let url = 'http://sumersin/forum.social.json';

function XHRpost(i) {
    return new Promise(function(resolve) {
        let params = 'id=nobot&%3Aoperation=social%3AcreateForumPost&subject=Demo' + i + '&message=Here%20is%20the%20Demo&_charset_=UTF-8';
        http.open('POST', url, true);
        http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        http.onreadystatechange = function() {
                console.log("Done " + i + "<<<<>>>>>" + http.readyState);
                if(http.readyState == 4){
                    console.log('SUCCESS :',i);
                    resolve();
                }
        }
        http.send(params);       
   });
}

for (let i = 1; i < 5; i++) {
    await XHRpost(i);
   }

Answer 6

If you want to run asynchronous functions inside a loop, but still want to keep the index or other variables after a callback gets executed you can wrap your code in an IIFE (immediately-invoked function expression).

var arr = ['Hello', 'World', 'Javascript', 'Async', ':)'];
for( var i = 0; i < arr.length; i++) {
  (function(index){
    setTimeout(function(){
       console.log(arr[index]);
 }, 500);