ajax - Firefox 似乎正在对并行 ajax 请求的成功函数进行排队，可能是因为 setTimeout？

Question

看看这个 jsfiddle。

http://jsfiddle.net/PRqZg/

HTML

<div class="colors" id="section_1"></div>
<div class="colors" id="section_2"></div>
<div class="colors" id="section_3"></div>
<div class="colors" id="section_4"></div>
<div class="colors" id="section_5"></div>
<div class="colors" id="section_6"></div>
<div class="colors" id="section_7"></div>
<div class="colors" id="section_8"></div>
<div class="colors" id="section_9"></div>
<div class="colors" id="section_10"></div>

JS

function doAjax(i)
{   
    var data = {json:"{\"x\": 1}"};

    $.ajax({
        url:"/echo/json/",
        data:"json"     
    })
    .done(function(result){
        $('#section_'+i).toggleClass('color2');         
    })          
    .always(function(){     
        setTimeout(function(){doAjax(i)}, 500);
    });
}

$(document).ready(function(){

    var obs = $('.colors');
    for(i = 0;i <= obs.length;i++)
    {
        doAjax(i);
    };
});

CSS

.colors {display:inline-block;width:100%;height:40px;border:1px solid #000;}
.color2 {background:red;}

我将其分解为我能想到的最简单的例子。我的最终软件需要为页面上的每个元素运行一个重复的单独的 ajax 请求，因此我目前不能考虑将其全部集中到一个请求中。

因此，在我的 fiddle 中，我制作了 7 个简单的 div，并且只想在成功的 ajax 请求后在它们上切换一个类，因此是我的简单示例。在 Chrome 中，正如我所期望的，因为请求是异步的，所有的 div 同时切换类(或者至少足够接近以欺骗人眼)。这甚至可以在 IE 中运行(尽管有一点延迟，以至于我注意到闪烁)。

但是，在 Firefox 中，似乎每个 ajax 请求 done() 函数在前一个请求完成之前不会触发。经过一些研究，我什至发现 Firefox 在开始排队之前可以一次向同一主机运行 6 个并发请求。但似乎这应该产生 fiddle 中呈现的结果，但按每六个请求而不是每个请求的比例进行。另外，如果我将 div 数量减少到 6 以下，我会观察到相同的行为。

这是 Firefox 中的错误还是我遗漏了什么？因为如果这是它的默认性能，那么考虑到所做的只是切换一个类，这似乎很糟糕。

Answer 1

事实证明，Firefox 有一种非常愚蠢的行为，它会将 ajax 请求排队到完全相同的 url，以便它们的成功函数被一个接一个地触发。解决方法是将随机变量数字附加到 ajx url 本身。我不确定这是否是奇怪行为背后的解决方法，或者只是由于 Firefox 的缓存方法所必需的。

注意:我实际上以十分之一秒/100 为单位传递时间戳，因此如果您曾经有过每十分之一秒触发一次以上的东西，则需要将时间戳除以较小的值。

将js更改为:

function doAjax(i)
{   
    var data = {json:"{\"x\": 1}"};
    var rand = new Date().getTime() / 100;
    $.ajax({
        url:"/echo/json/?rand="+rand,
        data:"json"     
    })
    .done(function(result){
        $('#section_'+i).toggleClass('color2');         
    })          
    .always(function(){     
        setTimeout(function(){doAjax(i)}, 500);
    });
}

$(document).ready(function(){

    var obs = $('.colors');
    for(i = 0;i <= obs.length;i++)
    {
        doAjax(i);
    };
});

请参阅此 fiddle 的工作示例: http://jsfiddle.net/Zv2R2/1/