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 リクエストを繰り返し実行する必要があるため、現時点ではすべてを 1 つのリクエストにまとめることは考えられません。

私のフィドルでは、7つの単純なdivを作成し、ajaxリクエストが成功した後にそれらのクラスを切り替えたいだけなので、私の単純な例です。クロムでは、リクエストが非同期であるため、期待どおり、すべての div が同時にクラスを切り替えます (または、少なくとも人間の目をだますのに十分近い)。これはIEでも機能しています（ちらつきに気付くまで少し遅れていますが）。

ただし、Firefox では、各 ajax リクエストdone()関数は、前の関数が完了するまで起動しないようです。いくつかの調査の結果、Firefox がキューイングを開始する前に、一度に同じホストに対して 6 つの同時要求を実行できることがわかりました。しかし、それはフィドルで提示された結果をもたらすはずですが、すべてのリクエストではなく6つのリクエストごとのスケールで表示されるはずです。また、div の数を 6 未満に減らすと、同じ動作が観察されます。

これはFirefoxのバグですか、それとも何か不足していますか? これがデフォルトのパフォーマンスである場合、行われているすべてがクラスの切り替えであることを考えると、かなり悪いように見えるからです。

4

1 に答える 1

0

Firefox には、まったく同じ URL への ajax リクエストをキューに入れ、それらの成功関数が次々と起動されるという、本当にばかげた動作をしていることがわかりました。これを回避するには、ランダムな変数番号を ajx URL 自体に追加します。これが奇妙な動作の背後にある回避策なのか、それとも Firefox のキャッシュ方式による必要性なのかはわかりません。

注: 実際にはタイムスタンプをデシ秒 1 秒/100 で渡しているので、10 分の 1 秒ごとに複数回起動するものがあった場合は、タイムスタンプをより小さい値で割る必要があります。

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 に答える