不要觸發AJAX請求，直到前一個完成

我有一個購物車，用戶可以添加更多的項目，更改現有項目的數量，刪除項目等。對於這些操作中的每一個，我都會對服務器執行異步AJAX調用，以便更新訂單總計。不要觸發AJAX請求，直到前一個完成

如果用戶添加一個項目（操作1），我進行異步調用，然後用戶更改另一個項目的數量（操作2），我希望操作2的響應顯示向上。由於這些調用是異步的，可能我得到的最新響應是來自操作1的響應，因此訂單總量不正確。

我應該遵循什麼模式才能在上一次完成之前不觸發相同的AJAX調用？

澄清：

正在發生的AJAX請求是相同的。說我做這個$ .get（'destination_url'）。我只需要確保在上一個完成/失敗之前我不會執行相同的請求。

2015-06-01 Hommer Smith

我想你可能正在尋找promise對象：參見['.promise（）']（https://api.jquery.com/promise/）。您可能會發現查看['.done（）']（https://api.jquery.com/deferred.done/），['.fail（）']（https：//api.jquery .com/deferred.fail /）和['.always（）']（https://api.jquery.com/deferred.always/）方法。 – War10ck

我建議你看看下面的SO文章。 jAndy的回答就是你要找的。 [使用jQuery.queue（）隊列ajax請求）（http://stackoverflow.com/questions/4785724/queue-ajax-requests-using-jquery-queue） – MightyLampshade

當與選定的任務相關的任務時，您可能想阻止其他選項選項正在進行中，例如顯示微調或禁用其他選項等。 – lshettyl

我建議你觸發done()當前AJAX請求後連續Ajax請求被稱爲：

$.ajax(options).done(function (data) { 
    // your logic 
    $.ajax(newOptions); 
});

來源

2015-06-01 15:31:19

我不明白這將如何允許OP「排隊」他的請求。在.done（）回調中新建AJAX是公平的，但是如果它們快速連續完成，它不會觸發後續請求。 – MightyLampshade

更新時間：

來源

2015-06-01 15:34:28 imGreg

這沒有幫助。 ajax調用是相同的。我只需要確保一個發生在第一個發生之前就不會發生。 –

@HommerSmith我更新了我的答案。除非，它們是否從兩個不同的地方被觸發？ – imGreg

jQuery.active返回一個整數，這是數當前活動的ajax請求已打開。

所以，你可以做一個檢查，你做的Ajax調用之前，

function checkAndCallAjax() { 
    if(jQuery.active == 0) { doAjax() } 
}

，然後添加和ajaxStop處理程序調用checkAndCallAjax你能保證你有沒有平行的訂單請求。 AjaxStop會讓你知道ajax通話何時結束。

來源

2015-06-01 15:35:24 cowboybebop

正如我在我的評論中所說的，其中一個選項是以編程方式激活/取消激活任何動作時的控件。當選定的動作完成時（ajax完成，做一些Ajax數據等）激活控件，以便用戶執行下一個動作等。下面是演示我的意思的代碼。

$(function() { 

    $("#actions").on("click", ".update", function() { 
     var $this = $(this); 
     var label = $this.text(); 
     $this.siblings().prop("disabled", true); 
     $this.text("Please wait..."); 
     //Ajax call 
     $.ajax({ 
      method: "POST", // or whatever fits 
      url: "/echo/html/", // your url 
      data: { method: "methodName" } // whatever data 
     }).done(function(data) { 
      //do stuff with returned data 
      //Enable the controls 
      $this.siblings().prop("disabled", false); 
      $this.text(label); 
     }).fail(function() { 
      //Handler error related stuff 
      alert("There was an error!"); 
      //Enable the controls 
      $this.siblings().prop("disabled", false); 
     }); 
    }); 
});

樣品HTML：

<div id="actions"> 
    <button class="update add">+1</button> 
    <button class="update subtract">-1</button> 
    <button class="update delete">Delete</button> 
</div>

=Working Demo=

希望有所幫助。

來源

2015-06-01 16:23:12 lshettyl

不要觸發AJAX請求，直到前一個完成

回答

相關問題