Question

看看这个jsfiddle。

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请求，所以我现在不能考虑将它们全部集中到一个请求中。

所以在我的小提琴中，我制作了7个简单的div，并且只是想在成功的ajax请求之后切换它们，因此我的简单例子。在chrome中，正如我所期望的那样，因为请求是异步的，所有div都在同一时间切换类（或者至少接近足以欺骗人眼）。这甚至可以在IE中工作（虽然有点延迟到我注意到闪烁的程度）。

但是，在firefox中，似乎每个ajax请求done()函数在前一个函数完成之前不会触发。经过一些研究后，我甚至发现firefox可以在开始排队之前一次向同一主机运行6个并发请求。但似乎应该产生小提琴中呈现的结果，但是每六个请求的比例而不是每个请求。另外，如果我将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);
    };
});

看到这个小提琴的工作示例： http://jsfiddle.net/Zv2R2/1/

Firefox似乎是因为setTimeout而排队并行ajax请求的成功函数？

1 个答案: