处理并发Ajax请求

Dealing with concurrent Ajax requests

本文关键字：请求 Ajax 并发 处理      更新时间：2023-09-26

我想做以下事情:

  • 我有一个链接列表，每个链接在单击时执行不同的Ajax调用。
  • 每个Ajax响应被分配一个目标，它将在哪里显示。
  • 当一个请求被处理时，链接仍然可以被点击(=进一步的Ajax调用)。
  • 以下示例有两个目标和四个链接:两个指向DIV#d1，两个指向DIV#d2。

我如何确保只有对最后发送的请求的响应最终将显示在其目标DIV中?

如果我点击链接标记Data1，然后Data2，第一个调用必须中止，因为Response1可以在Response2之后到达。这个问题似乎意味着我必须跟踪每个目标的先前请求，以便在发出新请求时可以中止它们。

我写了这段代码。我想知道你是否认为这种方法是正确的。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <ul>
      <li><a href="data1.htm" class="trigger" data-target="d1">Data 1</a></li>
      <li><a href="data2.htm" class="trigger" data-target="d1">Data 2</a></li>
      <li><a href="data3.htm" class="trigger" data-target="d2">Data 3</a></li>
      <li><a href="data4.htm" class="trigger" data-target="d2">Data 4</a></li>
    </ul>
    <div id="d1"></div>
    <div id="d2"></div>
    <script type="text/javascript" src="/test/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
      $(function(){
        var register = {};
        $(".trigger").on("click", function() {
          var target = $(this).attr("data-target");
          var url = $(this).attr("href");
          if (register[target] == undefined) register[target] = [];
          ajaxCall = $.get(url, function(data) { // Ajax request
            $("#" + target).html(data);
          });
          for (a in register[target]) { // Aborts existing ajax requests for this target
            register[target][a].abort();
          }
          register[target] = []; // Empty register for this target
          register[target].push(ajaxCall); // Register current ajax request
          return false;
        });
      });
    </script>
  </body>
</html>

我认为你的想法是对的。但是，您不应该使用for in来遍历数组。此外，您可能希望首先中止所有调用(只是为了确保)。

实际上，您在每个请求中清除数组，并且仅用一个ajax调用填充它。在这种情况下，没有必要遍历数组，因为您知道如果数组不是空的，它将只包含一个元素。另一方面，你不知道它是否包含0个或1个元素，所以循环是终止调用的最简洁的方法，如果它存在的话。

也可以使用.data来获取data-属性。

最后，可以使用||技巧。

var target = $(this).data("target"),
    url = $(this).attr("href");
register[target] = register[target] || [];
$.each(register[target], function() {
    this.abort();
});
ajaxCall = $.get(url, function(data) { // Ajax request
    $("#" + target).html(data);
});
register[target].push(ajaxCall); // Register current ajax request
相关文章：