2

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

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

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

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

4

1 回答 1

0

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

注意：我实际上是以分秒 1s/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/

于 2013-06-19T16:47:40.217 回答