浏览器停止工作在同步Ajax调用循环后的一段时间 [英] Browser stops working for a while after synchronous ajax call in a for loop

问题描述

这是我的code：

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

在本实施例中迭代虽小，但我提出这里该方法简单。我知道，我可以使用开关，但是这不是重点。在现实中它是循环的更大的数量。没关系的，发生这种code过错误。

In this example the iteration is small, but I made the method simpler here. I know that I can use switch, but that's not the point. In reality it is with much bigger number of loops. Nevermind that, the error happens for this code too.

下面是发生了什么：
如果我把断点在第一次Ajax调用成功的一部分，当我在Chrome调试，eveything工作正常。
这就是我的意思是做工精细：该方法进行了第一次成功后，我想一些div被隐藏和显示我得到来自Ajax调用结果的消息。进入第一次成功第二次，另一个字符串将被添加到previous。
最后，进入第二部分的成功时，该消息是隐藏的，我展示了一些数据。

Here's what happens: if I put breakpoint in the success part of the first ajax call and when I debug in Chrome, eveything works fine. Here's what I mean by working fine: after the method goes in the first success, I want some divs to be hidden and the message I get as a result from the ajax call to be shown. The second time the first success is entered, another string will be ADDED to the previous. In the end, when the second success part is entered, that message is hidden and I'm showing some data.

这是会发生什么：
直到的MyMethod叫一切都很好。当它被调用，浏览器停止工作。如果我preSS我的鼠标左键，没有任何反应。当的MyMethod被称为最后一次，浏览器正常工作，我得到消息的快速一瞥，然后它显示从第二个Ajax调用的数据。而且我很快看到的消息是整个消息，从所有的调用的MyMethod，这是不应该的。

And this is what happens: everything is fine until MyMethod is called. When it gets called, the browser stops working. If I press my left mouse key, nothing happens. When MyMethod is called for the last time, the browser works fine, I get quick glimpse of the message and then it shows the data from the second ajax call. And the message that I see shortly is the whole message, from all the calls to MyMethod, which shouldn't happen.

我希望它显示了整个循环，完成方法之前。和它不应该是相同的消息。它应该得到更大的每Ajax调用的MyMethod。

I want it to be shown for the entire for loop and before the Finish method. And it shouldn't be the same message. It should get bigger with every ajax call to MyMethod.

推荐答案

您可以使用一个递归功能来帮助您控制与异步调用流动。相反，同步运行它们，您可以异步运行它们，然后再次调用函数时，是时候为下一个。

You can use a "recursive" function to help you control flow with asynchronous calls. Instead of running them synchronously, you can run them all asynchronously and then call the function again when it is time for the next one.

是这样的：

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

而他们都呼吁这样，他们异步运行，不阻止一切;但在系列仍然可以运行。

This way they run async, don't block everything while they are calling; but still run in series.

这篇关于浏览器停止工作在同步Ajax调用循环后的一段时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！