推迟使用`.load（）`和/或ajax堆栈

Question

我有一个产品下拉列表和两组过滤器：类型（教育，游戏）和媒体（书，CD）的网页。您可以随时从任一过滤器中进行选择，并通过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请求，并且只有当他们全部完成时才执行一个操作？

Answer 1

为什么不只是在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'); 
     } 
    ); 
}); 

Answer 2

的一种方式做，这是通过消除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(); 
      } 

     } 
    ); 
});