Question

我的情况是，用户可以使用一堆表示为复选框的过滤器来操作大量数据（在表格中显示）。

该页面是AJAX，因此用户无需在每次单击过滤器时等待整页刷新。它当前实现的方式是让事件处理程序监视所有复选框，并在触发click事件时从服务器请求过滤数据。

这很好用。但是，有一个可用性和这样做的性能问题。例如，如果用户单击6个复选框，则会触发6个AJAX请求，并且它们都会以不同的间隔返回，从而导致页面更新6次。这很可能会使用户烦恼并且看起来效率很低。

我想在事件处理程序上放置某种超时来执行以下操作：“等待1秒钟，如果没有更多过滤器点击，则触发AJAX请求”。但是，目前我只能将所有6个请求延迟1秒。我不确定如何将过滤器信息聚合/收集到1个AJAX请求中。

任何建议都将不胜感激！

Answer 1

首先检查“点击”事件，看看是否有待定时器。如果是这样，点击应该取消它，并启动一个新的计时器。

(function() {
  var timeout = null;
  $('#yourForm').find('input:checkbox').click(function() {
    clearTimeout(timeout);
    timeout = setTimeout(function() {
      doTheAjaxStuff();
    }, 500);
  });
})();

这样的事情意味着，在用户暂停他们疯狂的盒子检查半秒之前，不会有任何AJAX请求。用户暂停后，请求应传输所有复选框的当前状态，以便进行适当的更新。请注意，这意味着您可能需要更改服务器操作的工作方式，因为您不会为每个输入分别进行AJAX调用。

Answer 2

jQuery有一些内置功能，如果这就是你所追求的。如果您只是存储结果以更新页面并use $.ajaxStop()。这仅在没有待处理请求时触发，因此在最后一个请求完成后触发。如果你连续发射5次然后他们都会回到彼此之上，这就会被调用一次，这似乎是你所追求的。

Description of .ajaxStop()：

每当Ajax请求完成时，jQuery都会检查是否还有其他未完成的Ajax请求。如果没有，jQuery会触发ajaxStop事件。已经使用.ajaxStop()方法注册的任何和所有处理程序都会在此时执行。

你可以像这样使用它：

$(document).ajaxStop(function() {
  $("#myPageElement").html($("#resultStore").html());
  $("#resultStore").empty(); //Cleanup
});

在你的ajax电话中：

$.ajax({
  //Existing stuff...
  success: function(data) {
    $("#resultStore").html(data);
  });
});

所以你的所有请求都正常完成，我们只是在最后更新一次内容，不知道如何变得更简单:)这也有好处，如果任何请求失败，最后一个成功用于更新页面。

Answer 3

您可以通过在第一次单击事件中设置标记来执行此操作，以便只启动一个计时器：

if (!ajaxRequestsPending) {
  ajaxRequestsPending = true;
  window.setTimeout(...);
}

实际执行ajax请求的代码会重置标志。

Answer 4

首先 - 尝试使用jQuery Grid插件 - 某些solumns可以在客户端进行排序。第二 - 也许你可以发出“确定”按钮来发送请求参数！？

聚合/收集AJAX请求

4 个答案: