處理並發Ajax請求

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 個解決方案

解決方案1
2 已采納 2011-11-24 16:13:28

處理並發Ajax請求

問題描述

1 個解決方案

解決方案1 2 已采納 2011-11-24 16:13:28

解決方案1
2 已采納 2011-11-24 16:13:28