在for循环中同步ajax调用后,浏览器停止工作一段时间

这是我的代码:

for (var i = 0; i < 2; i++) { $.ajax({ type: "GET", async: false, url: "/MyController/MyMethod", success: function (data) { if (i == 0) { $('#result_progress').hide(); $('#result_msg').hide(); $('#details').show(); } else if (i == 1) { $.ajax({ type: "GET", async: true, url: "/Import/Finish", success: function (data) { .... }); } if (i < 2) { $('#details').html($('#details').html() + 'someText')); } } }); } 

在这个例子中,迭代很小,但我在这里使方法更简单。 我知道我可以使用开关,但这不是重点。 实际上它有更多的循环。 没关系,这个代码也会发生错误。

接下来会发生什么:如果我将断点放在第一个ajax调用的成功部分以及我在Chrome中调试时,eveything工作正常。 这就是我工作正常的意思:在第一次成功之后,我希望隐藏一些div,并显示我从ajax调用中得到的消息。 第二次输入第一次成功时,另一个字符串将添加到前一个字符串。 最后,当输入第二个成功部分时,该消息被隐藏,我正在显示一些数据。

这就是发生的事情:在调用MyMethod之前一切正常。 当它被调用时,浏览器停止工作。 如果我按下鼠标左键,则没有任何反应。 当最后一次调用MyMethod时,浏览器工作正常,我快速浏览一下该消息,然后显示第二次ajax调用的数据。 我很快就看到的消息是从MyMethod的所有调用中发出的整个消息,这些消息不应该发生。

我希望它显示整个for循环和Finish方法之前。 它不应该是相同的消息。 每次调用MyMethod时都会变大。

您可以使用“递归”function来帮助您使用异步调用来控制流。 您可以异步运行它们,然后在下一个时间再次调用该函数,而不是同步运行它们。

就像是:

 function doCall(i) { if(i > howManyToRun) return; $.ajax({ //... succcess: function(data) { //... //time to start the next one doCall(++i); }, error: function() { //call the next one on error? doCallI(++i); } }) } 

这样他们就可以异步运行,不要在他们打电话时阻止所有事情; 但仍然是连续运行。