Question

我有两个函数.. addItem和removeItem POST到给定的网址。这些AJAX调用工作正常。但是，它们需要同步。我试图通过.when使它们同步。我的代码基本上是这样的：

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

但是这似乎没有正常工作，并且请求同时被解雇。

我还尝试将其中一个函数放在请求的complete中，如下所示：

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

但是，这似乎也没有起作用..在开始下一个AJAX请求之前完成一个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

问题在于你如何称呼它们。您将立即调用这两个函数，而不是将它们作为参数传递给::withTrashed()和$.when。

由于done返回Promise（或类似Promise的对象），因此您可以完全省略$.ajax。

$.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);

Answer 3

您可以使用jquery-ajaxQueue

或修改您的代码：

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

记住一件事，如果你看到一个函数后的括号，这意味着＆＃34;执行＆＃34;，所以如果你为回调removeItem()设置complete，它不会像预期的那样被召唤。当您将其设置为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()

使用2个AJAX调用时

4 个答案: