併發處理的Ajax請求

我有一個鏈接列表，點擊時分別執行不同的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>

來源

2011-11-24 Nicolas Le Thierry d' Ennequin

您的想法在我看來是正確的。但是，您不應該使用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

來源

2011-11-24 16:13:28 pimvdb

感謝您的意見和乾淨的代碼。我仍然認爲''register [target]'應該清除每個中止的請求（這實際上與在循環之後清除整個數組相同），然後再推入新的調用。所以我會保留行'register [target] = [];' –

併發處理的Ajax請求

回答

相關問題