Firefox似乎是排隊成功的並行Ajax請求可能是因爲setTimeout？

看看這個jsfiddle。Firefox似乎是排隊成功的並行Ajax請求可能是因爲setTimeout？

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>

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中，似乎每個阿賈克斯請求done()功能不會觸發，直到前一個完成。經過一番研究，我甚至發現firefox可以在同一主機上同時運行6個併發請求，然後開始排隊。但似乎應該產生小提琴的結果，但每六個請求的大小，而不是每一個請求。此外，我觀察到相同的行爲，如果我減少div的數量下降到6.

這是一個錯誤在Firefox或我錯過了什麼？因爲如果這是它的默認性能，那麼考慮到所做的全部工作就是切換一個班級，這似乎很糟糕。

來源

2013-06-18 Rooster

事實證明，Firefox有一個非常愚蠢的行爲，它使ajax請求排隊到完全相同的url，以便他們的成功函數被一個接一個地解僱。解決這個問題的方法是在ajx url本身附加一個隨機變量。我不確定這是一個怪異行爲背後的解決方法，還是由於Firefox的緩存方法而成爲必要條件。

注意：我實際上是在以秒爲單位傳遞時間戳1秒/ 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-19 16:47:40 Rooster

Firefox似乎是排隊成功的並行Ajax請求可能是因爲setTimeout？

回答

相關問題