两个异步 $.ajax 调用之间的竞争条件：Chrome 不受影响？答案

【问题标题】：Race condition between two async $.ajax call: Chrome is unaffected?两个异步 $.ajax 调用之间的竞争条件：Chrome 不受影响？
【发布时间】：2015-01-14 06:57:35
【问题描述】：

我有一个有趣的竞争条件，下面的代码仅适用于 Internet Explorer 7-11，而不是 Chrome 38。

我已经解决了问题本身，但我想了解更多关于不同浏览器行为的信息。

这是事件处理程序：

$("#myitem").change( function(){

    /* do stuff */

    data_select_form(111);
    data_select_form(222);

   /* do stuff */
});

这是被调用的函数：

function data_select_form(id) {

     /* do stuff */

$.ajax({ 
    type: "POST",
    url: "/ajax/",
    data: "p=" + id,
    success: function() {

        if(id==111)
        {
            $('#aPageElement').text("You should see this until the second call completes");
        }
        else
        {
            $('#aPageElement').text("Second call complete");
        }

    }
});
}

竞争条件发生当我的 /ajax/ 页面在返回第一个调用之前返回第二个调用的数据时（异步，第一个不会阻塞第二个）。

代码本身很容易修复（只需在第一个的 $.ajax().done() 上调用第二个），但真正让我感到困惑的是不同的浏览器在原始代码上的行为不同。 Internet Explorer 尊重异步方面，当第一次调用速度很慢时，会弄乱结果。 Chrome 只是等待第一次调用完成，这让我发疯了！

更新：Firefox 33 的行为类似于 Internet Explorer（它也不会等待第一次调用完成）。

为什么 Chrome 会这样？这是我应该报告的 Blink 错误吗？这不是在其他情况下会产生问题吗（例如，如果希望函数在不同对象上以并行方式工作）？

谢谢！

【问题讨论】：

我会说 Chrome 的行为是完全正确的，它是 IE 可能有问题。该调用本质上是异步的。您永远无法保证第一个呼叫将首先得到响应。
@RoryMcCrossan 赞了评论的最后一行。
你倒退了！正如我明确指出的，IE 尊重异步，Chrome 总是等待。

标签： jquery ajax google-chrome internet-explorer firefox

【解决方案1】：

调用是异步的，因此您无法保证它们返回的顺序。不同的浏览器使用它以不同的方式进行优化。

例如，Firefox 允许您更改 about:config 中的首选项 (network.http.max-persistent-connections-per-server)，这将限制每个域的 1 个连接，例如，这将确保您描述的顺序，例如，默认为 6。

现在假设您的 html 页面上有 4 个运行示例中的 javascript 代码的大图像，第一个连接将由 html 文档使用，另外 4 个将由图像使用，即 5 个连接将留给您的 javascript，这将导致您描述的顺序，如果您从文档中删除 1 个图像，结果会有所不同。

总之，你不能依赖异步请求的响应顺序。

【讨论】：