聚合/收集AJAX请求

Question

我遇到过这样的情况:用户可以通过使用一组表示为复选框的过滤器来操作大量数据(以表格形式显示)。

页面是AJAXed up的，因此用户不必在每次单击过滤器时都等待整个页面的刷新。它目前的实现方式是让事件处理程序监视所有的复选框，并在单击事件被触发时从服务器请求过滤的数据。

这可以很好地工作。然而，这样做有一个可用性和性能问题。例如，如果用户单击6个复选框，就会触发6个AJAX请求，它们都会以不同的时间间隔返回，从而导致页面更新6次。这很可能会惹恼用户，而且看起来相当低效。

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

如有任何建议，我们将不胜感激！

Answer 1

让"click“事件首先检查是否有计时器挂起。如果是这样，点击应该取消它，并启动一个新的计时器。

(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请求的代码将重置该标志。