Question

在下面的代码中，我希望警报按顺序排列（第一次调用后跟第二次调用），但它会反过来。这导致一些变量变得不确定。在同一代码中有多个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
    }

  }

});

Answer 1

行为上的差异是由于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");
      });
    }

Answer 2

默认情况下，Ajax 异步意味着不会等待响应。这就是你的第二个电话在ajax请求之前调用的原因。您可以通过设置async: false来创建ajax 同步。不推荐使用，因为它可能导致浏览器挂起。

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

在javascript中你可以这样做（对于你的代码）：

function get_det(callback) {//Your asynchronous request.  
    $.ajax({
      url: "aa.php",
      type: "POST",
      success: function (result) {
        alert("1st call");
        callback();//invoke when get response 
      }
    });
  }

这样打电话：

get_det(secondFunction);//calling with callback function

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

Answer 3

我建议链接$ .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在多个函数中调用顺序

3 个答案: