與2個AJAX調用一起使用時

Question

我有兩個功能.. addItem和removeItem POST到給定的URL。 這些AJAX調用工作正常。 但是，它們需要同步。 我正在嘗試使用.when使它們同步。 我的代碼基本上如下所示：

$.when(additem()).done(removeItem());

但這似乎無法正常工作，並且請求同時被觸發。

我還嘗試將功能之一放在請求的complete中，如下所示：

$.ajax({
  type: "POST",
  url: '/cart/update.js',
  data: {updates: updates},
  dataType: 'json', 
  complete: removeItem()
});

但這似乎也不起作用。在啟動下一個AJAX請求之前，正確的方法是什么？

謝謝

Answer 1

引用功能和調用功能之間是有區別的。

• 要引用功能，請僅使用其名稱。
• 要調用一個函數，請在函數名后加上括號。

設置回調（異步或非異步）時，您要引用該函數，而不是調用它。 在第二個函數調用之后加上括號，該調用將立即發生。

嘗試這個：

$.when(additem()).done(removeItem);

要么：

$.ajax({
  type: "POST",
  url: '/cart/update.js',
  data: {updates: updates},
  dataType: 'json', 
  complete: removeItem
});

如果需要將參數傳遞給回調，則必須使用括號，但為避免調用，應將函數包裝在另一個函數聲明中，如下所示：

$.when(additem()).done(function(){
  removeItem(<arguments here>);
});

要么：

$.ajax({
  type: "POST",
  url: '/cart/update.js',
  data: {updates: updates},
  dataType: 'json', 
  complete: function(){
    removeItem(<arguments here>);
  }
});

Answer 2

問題在於您如何稱呼他們。 您要立即調用這兩個函數，而不是將它們作為$.when和done參數傳遞。

由於$.ajax返回一個Promise（或類似Promise的對象），因此您可以完全省略$.when .。

 function addItem() { // $.ajax returns a Promise-like object return new Promise(function(resolve, reject) { console.log('Adding an item...'); setTimeout(function() { console.log('Item has been added'); resolve(); }, 2000); }); } function removeItem() { return new Promise(function(resolve, reject) { console.log('Removing an item...'); setTimeout(function() { console.log('Item has been removed'); resolve(); }, 2000); }); } // Promises implement a `then` function which runs when the promise resolves addItem() .then(removeItem); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 3

您可以使用jquery-ajaxQueue

或修改您的代碼：

$.ajax({
  type: "POST",
  url: '/cart/update.js',
  data: {updates: updates},
  dataType: 'json', 
  complete: removeItem
});

請記住，有一件事是，如果在函數后看到括號，則表示“執行”，因此，如果為callback complete設置removeItem() ，則不會按預期那樣調用它。 將其設置為complete時將調用它。

Answer 4

其他答案已經解決了您正在調用函數並傳遞結果而不是傳遞要調用的函數的事實。 該答案旨在強調ECMAScript 2017語言規范（ES8）中引入的新的異步和等待功能。

從下面的代碼片段中可以看到，每一行在執行之前都會等待上一行完成； 而如果沒有async和await，則每行都將執行而無需等待異步調用完成。

 const asyncFunc = text => new Promise((resolve, reject) => { setTimeout(() => resolve(text), 1000) }) async function main() { const hello = await asyncFunc("hello") console.log(hello) const world = await asyncFunc("world") console.log(world) } main()