Processus asynchrone à l'intérieur d'un javascript pour boucle

Question

Je lance une boucle d'événement de la forme suivante :

var i;
var j = 10;
for (i = 0; i < j; i++) {

    asynchronousProcess(callbackFunction() {
        alert(i);
    });
}

J'essaie d'afficher une série d'alertes montrant les chiffres de 0 à 10. Le problème est qu'au moment où la fonction de rappel est déclenchée, la boucle a déjà traversé quelques itérations et affiche une valeur plus élevée de i. Des recommandations sur la façon de résoudre ce problème ?

Answer 1

var i = 0;
var length = 10;

function for1() {
  console.log(i);
  for2();
}

function for2() {
  if (i == length) {
    return false;
  }
  setTimeout(function() {
    i++;
    for1();
  }, 500);
}
for1();

Voici un exemple d'approche fonctionnelle de ce qui est attendu ici.

Answer 2

ES2017 : Vous pouvez envelopper le code asynchrone à l'intérieur d'une fonction(disons XHRPost) renvoyant une promesse(code asynchrone à l'intérieur de la promesse).

Ensuite, appelez la fonction(XHRPost) à l'intérieur de la boucle for mais avec le mot-clé magique En attente. :)

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);       
    });
 }
 
(async () => {
    for (let i = 1; i < 5; i++) {
        await XHRpost(i);
       }
})();