Question

我正在尝试执行以下操作：

我有一个链接列表，每个链接在单击时执行不同的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>

Answer 1

在我看来，你的想法是正确的。但是，您不应使用for in循环数组。此外，您可能希望首先中止所有呼叫（只是为了确定）。

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

此外，您可以使用.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

处理并发Ajax请求

1 个答案: