推遲使用`.load（）`和/或ajax堆棧

我有一個產品下拉列表和兩組過濾器：類型（教育，遊戲）和媒體（書，CD）的網頁。您可以隨時從任一過濾器中進行選擇，並通過ajax相應地過濾掉下拉菜單。這一切都很好。推遲使用`.load（）`和/或ajax堆棧

當您選擇一個過濾器時，下拉菜單中會顯示一個跳動點，直到ajax解析爲止。問題是，如果在完成解析之前多次更改過濾器，則第一個請求會刪除跳動器，並在第二個請求仍在繼續時再次顯示下拉列表。這是我想解決的一個小問題。這裏是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(); 
      } 
     ); 
    });

顯然，在此期間，一個單選按鈕的變化，第一將解決，顯示列表和隱藏活動指示器，另一個完成之前。我可以做這樣的事情：然而，隨着Deferred

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

我覺得必須有一個更清潔的方式。有什麼辦法可以將請求添加到當前的Deffered堆棧，並等待它們全部解決（它們可以在任意時間添加）。我也注意到.load().then()似乎不起作用。 Deferred可以與一起使用嗎？我使用，因爲您可以指定僅返回的DOM元素，這很方便。如果不是，那麼是否有其他方式來管理當前的Ajax請求，並且只有當他們全部完成時才執行一個操作？

來源

2011-11-23 Explosion Pills

jQuery.load不返回延遲，因此您不能實際使用它。您必須切換到$ .get或$ .post或$ .ajax –

如果用戶更改過濾器變量，取消最後一個過濾器請求並啓動一個新過濾器會更有意義嗎？或者你是否真的想排列它們並按順序顯示每一個？ –

@ BenL任何方式工程..你如何取消其他請求？如果我不能使用'.load（）'，我仍然可以用'.get（）'做簡單的DOM過濾嗎？ –

爲什麼不只是在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-23 21:29:58

的一種方式做，這是通過消除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-23 21:37:29

因爲我不認爲你理解它，所以我會在html上發佈附錄。但是我現在太忙了 –

推遲使用`.load（）`和/或ajax堆棧

回答

相關問題