Javascript 等待函数完成-执行是异步的（不按顺序）

在继续我的代码之前，我正在尝试获取用户的城市和国家。似乎javascript没有按照我需要的顺序执行

$(document).ready(function() {    
  var country, city = '';

  function geoData() {
    $.getJSON('http://ipinfo.io/json?callback=?', function (data) { 
      console.log('step 1');
      country = data.country;
      city = data.city;
      console.log('step 2');
    });
  };

  geoData();        
  console.log('step 3');

  /* rest of the code */
});

我希望代码以如下方式执行：

step 1
step 2
step 3

但是，当我运行脚本时，我得到：

step 3
step 1
step 2

为什么代码以异步方式运行？有什么建议我可以修复它吗

---

谢谢。

AJAX请求是异步的——这就是第一个A所代表的。如果您的逻辑依赖于请求返回的数据，则需要将其放在回调函数中。试试这个：

var country, city = '';

function geoData() {
    $.getJSON('http://ipinfo.io/json?callback=?', function (data) { 
        console.log('step 1');
        country = data.country;
        city = data.city;
        console.log('step 2');

        step3();
    });
};

function step3() {
    console.log('step 3');
}

geoData();

另一种选择是使用承诺，尽管逻辑流程大致相当：

var country, city = '';

function geoData() {
    return $.getJSON('http://ipinfo.io/json?callback=?', function (data) { 
        console.log('step 1');
        country = data.country;
        city = data.city;
        console.log('step 2');
    });
};

var deferred = geoData();
$.when(deferred).done(function() {
    console.log('step 3');
});

---

使用jQuery承诺可以获得您想要的结果，如下所示：

var geoDataRequest = function () {

    var deferred = $.Deferred();

     $.getJSON('http://ipinfo.io/json?callback=?', function (data) { 
         deferred.resolve(data);
     });

    return deferred.promise();
};

var somefunction = function () {

    // This will return a promise
    var getGeoData = geoDataRequest ();

    // The appropriate function will be called based on if the promise is resolved or rejected through the success and error functions in the AJAX request
    getGeoData.then(

        // Done response
        function (result) {
            alert("Success! ");
            // Enter logic here for step 2 and 3
        },

        // Fail response
        function (xhr, status, errorThrown) {
            // Handle errors here...
        }
    );
};

somefunction();

---

此外，您现在可以随时使用

geoDataRequest

，并根据需要以不同的方式处理结果

等待加载完成，然后运行步骤3。完美！非常感谢。我终于明白了逻辑。这太奇怪了，我根本无法让它工作。。无论最后一个要调用的函数是什么，都会覆盖上一个函数中的数据。我尝试过这种方法，但无法在何时、何时完成以及何时开始工作。推迟或承诺什么都不做。