Promise resolve misses one value for asynchronous request loop

Question

Thanks to the help from here I could build a loop for posts and resolve the promises in order to handle asynchronous requests. But for some reason the loop to get the resolved promises and according values always misses one step. I tried to apply JotaBe's answer and it worked out, except there is one value missing. Everything else is fine. The simplified function I call is:

var logs = function (outString, saveCSV) {
           var promises = [];
           var count = 0;

           for (i = 1; i <= maxDevice; i++) {

              promises.push($.post(Type1));

              promises.push($.post(Type2));

              promises.push($.post(Type3));
           }

           promises.push($.post(Type4));


var promiseResolve = $.when.apply($, promises);

                   promiseResolve.then(function () {
                       console.log(promises[1].promise().state());
console.log(promises[2].promise().state());
                      for (i = 0; i < promises.length; i++) {
                         promises[i].then(function (data, textStatus) {
                            var src = this.url;
                            var arg = arguments;
                            console.log(i + ": " + textStatus);
                            if (posttype2 or 3){String1 += data
                            } else if (posttype4) > 0)
                            {
                               String2 += data
                            } else
                            {
                               string3 += data
                            }

                         });

                      } 
                      outString += String3+ "\n" + String2+"\n" + string1;
                      saveCSV(outString, filename);
                   });
        };

The console.log(i + ": " + textStatus);shows

0: success
2: success
3: success
4: success
5: success
6: success
7: success
8: success
9: success

So i = 1is never resolved, even though console.log(promises[1].promise().state()); states promises[1] IS resolved. If I set a breakpoint before the promiseResolve the missing promise is handled, though, while delaying the code with a timeout doesn't seem to help. I also tried to use .done, instead of .then with the same result. The data missing is the largest data package of the loop. It can't be the syntax, since the other promises fetched with the same get in the loop resolve just fine.

So what am I doing wrong, as I can't understand why this one is missing. As far as I understood $when.applyis used to make sure the promises are resolved (which the console log states are). How to handle this to get ALL values into the outstring?

Edit: I tried some more console.log lines to check for values, or if something isn't resolved. So a console.log(i); right before the promises[i].then(function (data, textStatus)´ shows i = 1 is called. The row is complete 0, 1, 2... but theconsole.log(i + ": " + textStatus);after the function misses the 1, so it shows ´promises[1].then(function (data, textStatus) {...} is not called.

Logging

     console.log(promises[1].promise().state());   
     console.log(promises[1].responseText);

right before the for.. loop shows the promise state is "resolved" and the responseText shows the string I want to attach to the outstrings. I also tried the proposed solution of Jaromanda X, but it did not help (thanks for the time), neither did using different combinations of using .doneinstead of .thenin either resolve function.

Putting a breakpoint before the promiseResolve.then seems to help, even if I click "run" as fast as I can. Have to try shortening that time, to be sure.

Adding another set of things I tried:

Splitting the posts/gets and the resolve into two functions and using the resolve as callback brought no success, neither did changing i to some unused variable, nor using for promise in promises to initiate the loop. I start running out of ideas to try, even more as promiseResolve returns resolved right at the promiseResolve.then function, so the request in promise[1] should be finished.

What seems to work, though I do not understand why and doesn't feel like the right way to solve the problem is encapsulating everything inside the promiseResolve.then function into a window.setTimeout(function(){...},1, so it looks more like

window.setTimeout(function(){
   for (i=0 ; i < promises.length; i++) {
      ...
   };
   outString += spotString + "\n" + ioString + "\n" + logString;
   saveCSV(outString, filename);
}, 1);

So, this one ms delay helps, but it doesn't feel like a clean solution. Can anyone explain why, or what I am missing? There must be a better way.

Answer 1

you have asynchronous code within the for loop that is using i

try this code

promiseResolve.then(function () {
    console.log(promises[1].promise().state());
    console.log(promises[2].promise().state());
    for (i = 0; i < promises.length; i++) {
        (function(i) { // ***** add this
            promises[i].then(function (data, textStatus) {
                var src = this.url;
                var arg = arguments;
                console.log(i + ": " + textStatus);
                if (posttype2 or 3) {
                    String1 += data
                } else if (posttype4) > 0) {
                    String2 += data
                } else {
                    string3 += data
                }
            });
        }(i)); // *****  add this
    }
    outString += String3 + "\n" + String2 + "\n" + string1; 
    saveCSV(outString, filename);
});

You'll have to make the changes from the invalid javascript to your actual code as above ... the additional lines are marked

what that code does is create a closure where i wont be changed before it is logged due to the asynchronous nature of the function it is logged in