Calling an asynchronous function within a for loop in JavaScript

async for loop javascript
javascript wait for loop to finish
javascript loop wait for function to finish
javascript promise for loop
synchronous for loop javascript
async/await for loop
api call inside for loop javascript
waiting for promises in a loop

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.

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

JavaScript async and await in loops, With this, we can begin looking at await in loops. JavaScript proceeds to call console.log('End') before the promises in the forEach loop gets resolved. This is because asynchronous functions always return promises. 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.

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

JavaScript loops - how to handle async/await, How to run async loops in sequence or in parallel? Before doing Because we can not use await inside synchronous function. As you can see  But the actual result is different. JavaScript proceeds to call console.log('End') before the promises in the forEach loop gets resolved. The console logs in this order: 'Start' 'End' '27' '0' '14' JavaScript does this because forEach is not promise-aware. It cannot support async and await. You cannot use await in forEach.

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.

Asynchronous code inside an array loop, And since it's flow is not procedural like normally seen in Js code, async Inside the loop below, we execute an async function and create If you are using lots of asynchronous functions, it can be worthwhile to use an asynchronous function library, instead of having to create your own utility functions. Async.js is a popular library that has many useful tools for dealing with asynchronous code.

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

Javascript make asynchronous calls inside a loop and pause /block , We need to make a request to fetch info for each user and call our render method after all user data has been retrieved. The requests can be  The async function declaration defines an asynchronous function, which returns an AsyncFunction object. An asynchronous function is a function which operates asynchronously via the event loop, using an implicit Promise to return its result.

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

The Pitfalls of Async/Await in Array Loops - DailyJS, Using async/await while looping through arrays in Javascript loop seems simple, Let's take a look at three different examples to see what you should look out for, I particularly like how this method allows the code to remain linear — which is using it to await asynchronous calls, since the intention is to hold up the loop  Asynchronous code inside an array loop. Async is one of the most important tool for Js developer. And since it’s flow is not procedural like normally seen in Js code, async code is a bit harder to follow. In this article, I will present a common case where loop and async function interact.

Async/Await Essentials for Production: Loops, Control Flows & Limits, Async/Await Essentials for Production: Loops, Control Flows & Limits Since its official inception in ES8, async/await has become a centerpiece for the future of JavaScript . with async and using await before each promise-returning function call: We can catch errors from this promise in an async function using the  Having await inside a real for loop will make sure all async calls are executed one by one. And the forEach + async way will fire off all promises at the same time, which is faster but sometimes overwhelmed( if you do some DB query or visit some web services with volume restrictions and do not want to fire 100,000 calls at a time).

How JavaScript works: Event loop and the rise of Async , How JavaScript works: Event loop and the rise of Async programming While the Call Stack has functions to execute, the browser can't do anything In reality, the JS Engine doesn't run in isolation — it runs inside a hosting  It can be used inside an Async block only. The keyword Await makes JavaScript wait until the promise returns a result. It has to be noted that it only makes the async function block wait and not the whole program execution. The code block below shows the use of Async Await together.

Calling an asynchronous function inside of a forEach loop: how to , A callback is nothing special but a function that is executed at some later time. Problems arise when we want to do multiple async operations. Hence, counts is actually an array of promises. .map calls the anonymous  This is a brief introduction to asynchronous JavaScript using Async.js and callbacks. Async.js is a very common library that makes it easier to do a variety of tasks using JavaScript. Functions in JavaScript. In JavaScript, like other languages, a function is a re-usable block of code that accepts arguments, does something, and returns a value.

Comments
  • @joseph you reasoning sounds great. Can you explain this part of me please " Iteration will have its own scope" ?
  • @SandipSubedi - This is where the concept of closures in javascript kicks-in. It's the ability of the inner function scope to remember all its references even if they are outside the function scope. You can view closures in dev tools using console.dir(object) or may be by simply putting breakpoint at the 'do_something' function and viewing the right pane of the developer tools. You can read about this more here => developer.mozilla.org/en-US/docs/Web/JavaScript/Closures.
  • I have been banging my head on a wall for past 24 hours, because I couldn't figure out why the f**king for loop isn't working as it suppose to. I have been using var i = 0 this whole time until I see your post. I change var i = 0 to let i = 0 and everything magically works fine. How can I give you all my reputation, you deserve all of it...
  • let was the winner for me
  • "Using ES6 (typescript)", typescript?? async/await is part of the language!