Issues with promise inside for loop

Question

I am trying to call a promise inside a for loop. I need the call to have the relevant loop item. I read a bit about it but still can't seem to figure the correct way to do it.

var params;
var  identifylayers =["parcels", "lots", "gasstation"];
for (i = 0; i < identifylayers.length; i++)
{
        lname = identifylayers[i];

    govmap.intersectFeatures()
    .then(function (e)
    {
       alert( lname);
    });

}

Running the function returns: gasstation,gasstation,gasstation

I want it to return: parcels, lots, gasstation

What am I doing wrong?

its an array of layers that looks like this [parcels, lots, gasstation] — Lord Corwin, Aug 29 '18 at 14:49
What happens if you `alert( params.layerName);` instead of `alert( lname);` — AmmoPT, Aug 29 '18 at 15:26
Why to call promise inside the loop , it's better use the promise.all and handle the response inside the then handler. Promise.all([url1,url2]).then([rest,res2]). — KrishnaSingh, Aug 30 '18 at 08:46
`lname` can only hold one value at a time. By the time the `then` function runs, the loop has already finished long ago and you see the variable's current value three times. — JJJ, Aug 30 '18 at 08:55
Start by declaring your `i` and `lname` variables. If you use `let` to declare them, it'll work. — Bergi, Aug 30 '18 at 12:58

score 0 · Accepted Answer · answered Aug 30 '18 at 09:05

Its the async devil of JavaScript lurking in your code. :D

Observe it like this -

As soon as your program flow encounter a promise call which here is - intersectFeatures().then(fn (){}), it know that this call will eventually finish so the program flow will never attempt to execute the callback passed to .then() right at the moment instead it will keep it safe with itself and set a reminder that as soon as the intersectFeatures is finished it need to execute the callback passed to .then().
Next thing to notice is how the .then(callback) will have access to lname. Its by closures. So
Another important thing to notice is that this whole stuff is inside a loop. Your loop has no idea whether the code its iterating on is synchronous or asynchronous. Its only task is to iterate. And as we mentioned before in Point - 1 the .then(callback) will not be executed right at the moment. So by the time then .then(callback) will be executed your loop would already be finished and at the end of iteration lname holds gasstation. Hence your .then(callback) only print gasstation

Solution:

This is really old JS solution of iterating the async code and still ensuring the proper variable access using closures -

    for (i = 0; i < identifylayers.length; i++)
    {
        lname = identifylayers[i];
        (function (lname) {
            govmap.intersectFeatures()
                  .then( function () {
                      alert(lname);
                  } )
        })(lname);

    }

This utilises the benefit of functional scope of a variable and idea of closures. Google it to find more information.

Its also referred to as befriending closures, I just made that up :D

Cheers!

have heared about closures but never understood it fully .it works .thanks a lot Himanshu . — Lord Corwin, Aug 30 '18 at 12:13
Cheers buddy :D Read [this](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) to know more about closures and practical use case. — Himanshu Singh, Aug 30 '18 at 17:48

Steven Spungin · Answer 2 · 2018-08-30T14:32:30.737

-1

Define lname in the loop. Currently it is the same instance for each iteration, so it gets overriden, and then the promise resolves and prints the last overwrite each time.

const lname = identifylayers[i];

It is getting overriden before the async code runs.

async function intersectFeatures() {
  return "OK"
}

var params;
var identifylayers = ["parcels", "lots", "gasstation"];
for (let i = 0; i < identifylayers.length; i++) {
  const lname = identifylayers[i];
  intersectFeatures()
    .then(function(e) {
      alert(lname);
    });

}

edited Aug 30 '18 at 14:32

answered Aug 30 '18 at 08:56

Steven Spungin

27,002
5
88
78

hey steven thatnks for answering but i defined the lname as you suggested but it didnt solve the problem. – Lord Corwin Aug 30 '18 at 12:04
1

@LordCorwin I posted a snippet. It works as expected. Remove the `const` and it reverts to the behavior you reported. – Steven Spungin Aug 30 '18 at 12:11
use const or let instead of val. My original solution used the wrong type. – Steven Spungin Aug 30 '18 at 12:12
hey stevan thanks for your time let and async work in chrom browser but some of my users use ie 11 and it doesnt support let or async. – Lord Corwin Aug 30 '18 at 14:06
You don't need to use async. Returning a promise will do. That was just for testing. Problem is exactly what I stated. And IE 11 supports const and let. I updated solution with promise. – Steven Spungin Aug 30 '18 at 14:16
when i use let in my code in ie 11 i get an undefiend for the i parameter . – Lord Corwin Aug 30 '18 at 14:27
Then declare i as let too. Will update. – Steven Spungin Aug 30 '18 at 14:32

Issues with promise inside for loop

2 Answers2