Javascript Ajax在多个函数中的调用顺序

在下面的代码中，我希望警报按顺序出现（第一次呼叫之后是第二次呼叫），但它总是以相反的方式出现。这导致一些变量未定义。在同一代码中有多个ajax查询时，执行顺序是什么？如何更改警报的顺序

$(document).ready(function () {

  function get_det() {
    $.ajax({
      url: "aa.php",
      type: "POST",
      success: function (result) {
        alert("1st call");
      }
    });
  }

  $.ajax({
    type: "POST",
    contentType: "application/json",
    url: "dd.php",
    success: function (result) {
      initializeMap();
    }
  });


  function initializeMap() {
    //other code
    calculateAndDisplayRoute();
    //other code

    function calculateAndDisplayRoute() {
      //other code
      get_det();
      alert("2nd call");
      //other code
    }

  }

});

---

行为上的差异是由于ajax调用的

async

性质造成的。在您的情况下，您希望在执行调用后执行一些代码，因此，您需要使用

callback

函数

将代码更新为以下内容

function get_det(callback) {
    $.ajax({
      url: "aa.php",
      type: "POST",
      success: function (result) {
        alert("1st call");
        if(callback) {
          callback();
        }
      }
    });
  }

 function calculateAndDisplayRoute() {
      //other code
      get_det(function() { 
         /* this is the place where you need to put code 
          * that needs to be executed after the ajax has been executed */
         alert("2nd call");
      });
    }

---

行为上的差异是由于ajax调用的

async

性质造成的。在您的情况下，您希望在执行调用后执行一些代码，因此，您需要使用

callback

函数

将代码更新为以下内容

function get_det(callback) {
    $.ajax({
      url: "aa.php",
      type: "POST",
      success: function (result) {
        alert("1st call");
        if(callback) {
          callback();
        }
      }
    });
  }

 function calculateAndDisplayRoute() {
      //other code
      get_det(function() { 
         /* this is the place where you need to put code 
          * that needs to be executed after the ajax has been executed */
         alert("2nd call");
      });
    }

---

默认情况下，Ajax是异步的，这意味着不需要等待响应。 这就是为什么您的第二个调用在ajax请求之前调用。 通过设置

async:false

，可以使ajax同步。不建议使用，因为这可能会导致浏览器挂起

对于异步进程，您可以使用回调函数，该函数仅在请求完成时调用。（推荐）

在javascript中，您可以这样做（针对您的代码）：

这样称呼：

get_det(secondFunction);//calling with callback function

function secondFunction()//your callback function
{
 alert("2nd Call");
}

---

默认情况下，Ajax是异步的，这意味着不需要等待响应。 这就是为什么您的第二个调用在ajax请求之前调用。 通过设置

async:false

，可以使ajax同步。不建议使用，因为这可能会导致浏览器挂起

对于异步进程，您可以使用回调函数，该函数仅在请求完成时调用。（推荐）

在javascript中，您可以这样做（针对您的代码）：

这样称呼：

get_det(secondFunction);//calling with callback function

function secondFunction()//your callback function
{
 alert("2nd Call");
}

---

我建议将$.ajax返回的承诺链接起来

$(document).ready(function () {

  function get_det() {
    return $.ajax({
      url: "aa.php",
      type: "POST"
    }).then(function(result) {
      // Do some stuff - you can even modify the result!
      // Return the result to the next "then".
      return result;
    })
  }

  // Named after the php script you're hitting.
  function dd() {
    // Return the promise from Ajax so we can chain!
    return $.ajax({
      type: "POST",
      contentType: "application/json",
      url: "dd.php"
    });
  }

  function initializeMap() {
    // Do stuff before call
    return get_det().then(function(getDetResult) {
      // Do stuff after AJAX returns..
      return {
        getDetResult: getDetResult,
        mapInitialized: true
      };
    });
  }

  // use it!
  dd().then(function(result) {
    alert('1st call');
    // Pass result from dd to initializeMap.
    return initializeMap(result);
  }).then(function(initMapResult) {
    alert('2nd call', initMapResult.mapInitialized);
  });

});

---

我建议将$.ajax返回的承诺链接起来

$(document).ready(function () {

  function get_det() {
    return $.ajax({
      url: "aa.php",
      type: "POST"
    }).then(function(result) {
      // Do some stuff - you can even modify the result!
      // Return the result to the next "then".
      return result;
    })
  }

  // Named after the php script you're hitting.
  function dd() {
    // Return the promise from Ajax so we can chain!
    return $.ajax({
      type: "POST",
      contentType: "application/json",
      url: "dd.php"
    });
  }

  function initializeMap() {
    // Do stuff before call
    return get_det().then(function(getDetResult) {
      // Do stuff after AJAX returns..
      return {
        getDetResult: getDetResult,
        mapInitialized: true
      };
    });
  }

  // use it!
  dd().then(function(result) {
    alert('1st call');
    // Pass result from dd to initializeMap.
    return initializeMap(result);
  }).then(function(initMapResult) {
    alert('2nd call', initMapResult.mapInitialized);
  });

});

---

---

您的答案是正确的，但我建议改为使用方法。感谢您的建议：）如果可能，请编辑此内容，因为我没有使用

call（）

。我知道它是什么，但不确定在哪里调用和不在哪里调用。谢谢，使用async:false对我有效。你是上帝！感谢您为我指明了正确的方向，了解了javascript中的异步和同步请求。以前不知道。@NisalUpendra公平地说，使ajax请求同步是可能的，但应谨慎使用。当进程同步时，如果数据传输需要一段时间，将导致浏览器挂起。我建议使用Anand的解决方案使您的警报顺序保持完整。没有人想面对挂起的浏览器。您的答案是正确的，但我建议改为使用方法。感谢您的建议：）如果可能，请编辑此内容，因为我没有使用

call（）

。我了解它是什么，但不确定在哪里调用和不在哪里调用。谢谢，使用async:false对我有效。你是上帝！感谢您为我指明了正确的方向，了解了javascript中的异步和同步请求。以前不知道。@NisalUpendra公平地说，使ajax请求同步是可能的，但应谨慎使用。当进程同步时，如果数据传输需要一段时间，将导致浏览器挂起。我建议使用Anand的解决方案使您的警报顺序保持完整。没有人想面对挂起的浏览器。@NisalUpendra-这将不起作用，因为您没有传递回调函数。一个更简单的更改是

getwypts（function（）{alert（“hello”）；}）

@NisalUpendra-在调用getwypts函数后，移动您编写的代码以代替警报。当代码部署到生产环境中或调用花费大量时间时，冻结效果变得更加明显！她工作。nikhil的帽子掉了。非常感谢你。我接受了你的回答。如果你能更新你的答案，那就太好了this@NisalUpendra-阿南德有一个更好的解释，因此，这是我谦虚的请求，请坚持你最初接受的答案。我的目标是努力让事情按应有的方式为你工作。另外，请让我知道你想要什么更新w.r.t.我的答案。我会照你的意愿去做。我重置了它。我要求您指出，在函数之后执行的代码可以包含在回调中。@NisalUpendra-这将不起作用，因为您没有传递回调函数。一个更简单的更改是

getwypts（function（）{alert（“hello”）；}）

@NisalUpendra-在调用getwypts函数后，移动您编写的代码以代替警报。当代码部署到生产环境中或调用花费大量时间时，冻结效果变得更加明显！她工作。nikhil的帽子掉了。非常感谢你。我接受了你的回答。如果你能更新你的答案，那就太好了this@NisalUpendra-阿南德有一个更好的解释，因此，这是我谦虚的请求，请坚持你最初接受的答案。我的目标是努力让事情按应有的方式为你工作。另外，请让我知道你想要什么更新w.r.t.我的答案。我会照你的意愿去做。我重置了它。我要求您指出，在函数之后执行的代码可以包含在回调中。感谢您添加这个答案。到目前为止，我还不知道（或听说）在jquery中链接承诺。我也会尝试一下。@NisalUpendra它非常灵活-异步的东西变得非常简单。谢谢你添加这个答案。到目前为止，我还不知道（或听说）在jquery中链接承诺。我也会尝试一下。@NisalUpendra它非常灵活-异步的东西变得超级简单。