处理并发Ajax请求

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

• 我有一个链接列表，每个链接在单击时执行不同的Ajax调用。
• 为每个Ajax响应分配一个将显示的目标。
• 在处理请求时，仍然可以单击链接（=进一步的Ajax调用）。
• 下面的例子有两个目标和四个链接：两个指向DIV＃d1，两个指向DIV＃d2。

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

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

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

        
 
Data 1
 
Data 2
 
Data 3
 
Data 4
 
 
 
   $(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; }); });    

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