0

製品のドロップダウン リストと、タイプ (教育、ゲーム) とメディア (本、CD) の 2 つのグループのフィルターを含む Web ページがあります。いずれかのフィルターからいつでも選択でき、ドロップダウンは ajax を介してそれに応じてフィルター処理されます。これはすべてうまくいきます。

フィルターを選択すると、ajax が解決されるまで、ドロップダウンの上にスロバーが表示されます。問題は、解決が完了する前にフィルターを複数回変更すると、最初のリクエストでスロバーが削除され、2 番目のリクエストがまだ進行している間にドロップダウンが再び表示されることです。これは私が修正したい小さな問題です。これがJavaScriptです：

     $('.radio-filter-type').change(function() {
        $("#products-list").hide();
        $("#products-throbber").show();
        $("#products-container").load(window.location + ' #products-list',
           $("#filter-type").serialize() + '&medium=' + $("#filter-media
              input[name=medium]:checked").val()
           , function () {
              $("#products-list").show();
              $("#products-throbber").hide();
           }
        );
     });

明らかに、その間にラジオボタンが変更され、最初のボタン.load()が解決され、リストが表示され、他のボタンが終了する前にスロバーが非表示になります。私はこのようなことができます：

reqCount = 0;
...
.change( ...
   reqCount++;
   .load( ...
      , function () {
         reqCount--;
         if (!reqCount) { //show list and hide throbber

しかし、Deferred私はもっときれいな方法が必要だと感じています。現在の遅延スタックにリクエストを追加し、それらがすべて解決されるまで待機する方法はありますか (任意の時点で追加できます)。.load().then()また、機能していないように見えることにも気付きます。Deferredまったく使用できます.load()か？.load()返却するDOM要素のみ指定できるので便利です。そうでない場合、現在の ajax リクエストを管理し、すべてが一度に完了したときにのみアクションを実行する方法はありますか?

4

2 に答える 2

0

ajax投稿の進行中にフィルター入力を無効にしないのはなぜですか? それほど良くはありませんが、問題を解決します。

$('.radio-filter-type').change(function() {
    $("#products-list").hide();
    $("#products-throbber").show();
    //disable checkbox
    $("#filter-media input[name=medium]).attr('disabled', 'disabled');
    $("#products-container").load(window.location + ' #products-list',
       $("#filter-type").serialize() + '&medium=' + $("#filter-media
          input[name=medium]:checked").val()
       , function () {
          $("#products-list").show();
          $("#products-throbber").hide();
          //renable checkbox
          $("#filter-media input[name=medium]).removeAttr('disabled');
       }
    );
 });
于 2011-11-23T21:29:58.040 に答える
0

これを行う方法は、フィルターの値が元の要求の値と異なる場合に、ajax 要求が正常に終了したときにアクションをキャンセルすることです。そのコードがどのように見えるかを試してみます。

$('.radio-filter-type').change(function() {
    var filterStateAtChange = $("#filter-media input[name=medium]).is(':checked');

    $("#products-list").hide();
    $("#products-throbber").show();
    $.get(window.location + ' #products-list',
        $("#filter-type").serialize() + '&medium=' + $("#filter-media
          input[name=medium]:checked").val()
       , 
      function (html) {
          //cancel (do nothing) if the value of the checkbox now is not equal to what it was when request originated
          if (filterStateAtChange === $("#filter-media input[name=medium]).is(':checked')) {
              $("#products-container").html(html)
              $("#products-list").show();
              $("#products-throbber").hide();
          }

       }
    );
 });
于 2011-11-23T21:37:29.987 に答える