javascript for 循环中的异步进程 [duplicate]-解网

问：

5年前关闭。

社群在 12 个月前审查了是否重新打开这个问题，并关闭了这个问题：

重复这个问题已经得到回答，不是唯一的，也没有与另一个问题区分开来。

我正在运行以下形式的事件循环：

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

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

我正在尝试显示一系列显示数字 0 到 10 的警报。问题在于，当触发回调函数时，循环已经经历了几次迭代，并且它显示了更高的值。关于如何解决这个问题的任何建议？i

JavaScript 异步 for 循环同步

这是因为循环不会等待异步操作完成，然后继续循环的下一次迭代，并且异步回调会在将来的某个时间调用。因此，循环完成其迭代，然后在这些异步操作完成时调用回调。因此，循环索引是“完成”的，并且位于所有回调的最终值处。for

要解决此问题，您必须为每个回调单独保存循环索引。在 Javascript 中，执行此操作的方法是在函数闭包中捕获它。这可以通过专门为此目的创建一个内联函数闭包来完成（下面显示的第一个示例），也可以创建一个将索引传递给的外部函数，并让它为您唯一地维护索引（下面显示的第二个示例）。

截至 2016 年，如果您有一个完全符合规范的 Javascript ES6 实现，您还可以用于定义循环变量，它将为循环的每次迭代唯一定义（下面的第三个实现）。但是，请注意，这是 ES6 实现中的后期实现功能，因此您必须确保执行环境支持该选项。letforfor

使用 .forEach（）进行迭代，因为它创建了自己的函数闭包

someArray.forEach(function(item, i) {
    asynchronousProcess(function(item) {
        console.log(i);
    });
});

使用 IIFE 创建自己的函数闭包

var j = 10;
for (var i = 0; i < 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);
}

创建或修改外部函数并向其传递变量

如果你可以修改该函数，那么你可以将值传递到那里，并将函数 cntr 返回回调，如下所示：asynchronousProcess()asynchronousProcess()

var j = 10;
for (var i = 0; i < j; i++) {
    asynchronousProcess(i, function(cntr) {
        console.log(cntr);
    });
}

使用 ES6 let

如果你有一个完全支持 ES6 的 Javascript 执行环境，你可以在循环中使用，如下所示：letfor

const j = 10;
for (let i = 0; i < j; i++) {
    asynchronousProcess(function() {
        console.log(i);
    });
}

let在这样的循环声明中声明将为每个循环调用创建一个唯一的值（这是你想要的）。fori

使用 promise 和 async/await 进行序列化

如果您的异步函数返回一个 promise，并且您希望序列化您的异步操作以一个接一个地运行，而不是并行运行，并且您在支持和的新式环境中运行，那么您有更多选择。asyncawait

async function someFunction() {
    const j = 10;
    for (let i = 0; i < j; i++) {
        // wait for the promise to resolve before advancing the for loop
        await asynchronousProcess();
        console.log(i);
    }
}

这将确保一次只有一个调用在运行中，并且在每个调用完成之前，循环甚至不会前进。这与以前的方案不同，以前的方案都并行运行异步操作，因此这完全取决于所需的设计。注意：使用 promise，因此您的函数必须返回一个 promise，该 promise 在异步操作完成时被解析/拒绝。另外，请注意，为了使用，必须声明包含函数。asynchronousProcess()forawaitawaitasync

并行运行异步操作，并使用 Promise.all（） 按顺序收集结果

 function someFunction() {
     let promises = [];
     for (let i = 0; i < 10; i++) {
          promises.push(asynchonousProcessThatReturnsPromise());
     }
     return Promise.all(promises);
 }

 someFunction().then(results => {
     // array of results in order here
     console.log(results);
 }).catch(err => {
     console.log(err);
 });

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

上一个：异步执行与同步执行。有什么区别？[关闭]

下一个：如何在C#中从同步方法调用异步方法？

javascript for 循环中的异步进程 [duplicate]

Asynchronous Process inside a javascript for loop [duplicate]

评论

评论

评论

评论