jquery - 聚合/收集 AJAX 请求

Question

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

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

这很好用。然而，这样做存在可用性和性能问题。例如，如果用户单击 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 调用。