Asynchronous Process inside a javascript for loop

Question

I am running an event loop of the following form   var i  var j   10  for  i   0  i  lt  j  i           asynchronousProcess callbackFunction             alert i               I am trying to display a series of alerts showing the numbers 0 through 10  The problem is that by the time the callback function is triggered  the loop has already gone through a few iterations and it displays a higher value of i  Any recommendations on how to fix this

User · Answer

async await is here  ES7   so you can do this kind of things very easily now     var i    var j   10    for  i   0  i  lt  j  i          await asycronouseProcess        alert i         Remember  this works only if asycronouseProcess is returning a Promise  If asycronouseProcess is not in your control then you can make it return a Promise by yourself like this  function asyncProcess       return new Promise  resolve  reject    gt        asycronouseProcess     gt         resolve                    Then replace this line await asycronouseProcess    by await asyncProcess     Understanding Promises before even looking into async await is must  Also read about support for async await

User · Answer

x000D   x000D  var i   0  x000D  var length   10  x000D   x000D  function for1     x000D    console log i   x000D    for2    x000D    x000D   x000D  function for2     x000D    if  i    length    x000D      return false  x000D      x000D    setTimeout function     x000D      i    x000D      for1    x000D       500   x000D    x000D  for1    x000D   x000D   x000D    Here is a sample functional approach to what is expected here

User · Answer

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       x000D   x000D  let http   new XMLHttpRequest    x000D  let url    http   sumersin forum social json   x000D   x000D  function XHRpost i    x000D    return new Promise function resolve    x000D      let params    id nobot amp  3Aoperation social 3AcreateForumPost amp subject Demo    i     amp message Here 20is 20the 20Demo amp  charset  UTF-8   x000D      http open  POST   url  true   x000D      http setRequestHeader  Content-type    application x-www-form-urlencoded    x000D      http onreadystatechange   function     x000D      console log  Done     i     lt  lt  lt  lt  gt  gt  gt  gt  gt     http readyState   x000D            if http readyState    4   x000D                console log  SUCCESS    i   x000D                resolve    x000D              x000D             x000D      http send params          x000D          x000D     x000D    x000D   async      gt    x000D      for  let i   1  i  lt  5  i      x000D          await XHRpost i   x000D           x000D        x000D   x000D   x000D

User · Answer

The for loop runs immediately to completion while all your asynchronous operations are started   When they complete some time in the future and call their callbacks  the value of your loop index variable i will be at its last value for all the callbacks     This is because the for loop does not wait for an asynchronous operation to complete before continuing on to the next iteration of the loop and because the async callbacks are called some time in the future   Thus  the loop completes its iterations and THEN the callbacks get called when those async operations finish   As such  the loop index is  done  and sitting at its final value for all the callbacks   To work around this  you have to uniquely save the loop index separately for each callback   In Javascript  the way to do that is to capture it in a function closure   That can either be done be creating an inline function closure specifically for this purpose  first example shown below  or you can create an external function that you pass the index to and let it maintain the index uniquely for you  second example shown below    As of 2016  if you have a fully up-to-spec ES6 implementation of Javascript  you can also use let to define the for loop variable and it will be uniquely defined for each iteration of the for loop  third implementation below    But  note this is a late implementation feature in ES6 implementations so you have to make sure your execution environment supports that option   Use  forEach   to iterate since it creates its own function closure  someArray forEach function item  i        asynchronousProcess function item            console log i                 Create Your Own Function Closure Using an IIFE  var j   10  for  var i   0  i  lt  j  i           function cntr               here the value of i was passed into as the argument cntr            and will be captured in this function closure so each            iteration of the loop can have it s own value         asynchronousProcess function                 console log cntr                      i       Create or Modify External Function and Pass it the Variable  If you can modify the asynchronousProcess   function  then you could just pass the value in there and have the asynchronousProcess   function the cntr back to the callback like this   var j   10  for  var i   0  i  lt  j  i          asynchronousProcess i  function cntr            console log cntr               Use ES6 let  If you have a Javascript execution environment that fully supports ES6  you can use let in your for loop like this   const j   10  for  let i   0  i  lt  j  i          asynchronousProcess function             console log i               let declared in a for loop declaration like this will create a unique value of i for each invocation of the loop  which is what you want    Serializing with promises and async await  If your async function returns a promise  and you want to serialize your async operations to run one after another instead of in parallel and you re running in a modern environment that supports async and await  then you have more options   async function someFunction         const j   10      for  let i   0  i  lt  j  i                 wait for the promise to resolve before advancing the for loop         await asynchronousProcess            console log i             This will make sure that only one call to asynchronousProcess   is in flight at a time and the for loop won t even advance until each one is done   This is different than the previous schemes that all ran your asynchronous operations in parallel so it depends entirely upon which design you want   Note  await works with a promise so your function has to return a promise that is resolved rejected when the asynchronous operation is complete   Also  note that in order to use await  the containing function must be declared async   Run asynchronous operations in parallel and use Promise all   to collect results in order   function someFunction          let promises            for  let i   0  i  lt  10  i                promises push asynchonousProcessThatReturnsPromise                 return Promise all promises        someFunction   then results   gt            array of results in order here      console log results       catch err   gt         console log err

User · Answer

Any recommendation on how to fix this    Several  You can use bind   for  i   0  i  lt  j  i          asycronouseProcess function  i            alert i         bind null  i        Or  if your browser supports let  it will be in the next ECMAScript version  however Firefox already supports it since a while  you could have   for  i   0  i  lt  j  i          let k   i      asycronouseProcess function             alert k               Or  you could do the job of bind manually  in case the browser doesn t support it  but I would say you can implement a shim in that case  it should be in the link above    for  i   0  i  lt  j  i          asycronouseProcess function i            return function                  alert i                  i        I usually prefer let when I can use it  e g  for Firefox add-on   otherwise bind or a custom currying function  that doesn t need a context object

User · Answer

JavaScript code runs on a single thread  so you cannot principally block to wait for the first loop iteration to complete before beginning the next without seriously impacting page usability   The solution depends on what you really need   If the example is close to exactly what you need   Simon s suggestion to pass i to your async process is a good one

[javascript] Asynchronous Process inside a javascript for loop

Examples related to javascript

Examples related to asynchronous

Examples related to for-loop

Examples related to synchronization