javascript - 如何让 getJSON 在运行其余代码之前等待？

Question

我编写了一个简单的函数来确定您的城市位置。但是，我想知道是否有办法强制函数等待 getJSON 然后移动到下一行代码？在示例中，您会看到它显示“警报 1”跳过“警报 2”并直接转到“警报 3”，然后显示“警报 2”。提前谢谢你。

最好的问候，乔治

var Alpha;

function Location(){
	alert(Alpha + " 1");
	$.getJSON("http://freegeoip.net/json/?callback=?", function(location){
		Alpha = location.city;
		alert(Alpha + " 2");
	});	
	alert(Alpha + " 3");
}

$(document).ready(function() {
	Location();
});

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

Answer 1

在您的代码中，getJSON 异步返回结果。这意味着代码将在执行期间继续运行。

您可以将您的代码移动到成功回调以确保在返回结果之前没有运行任何东西，如下所示:

var Alpha;

function Location(){
    alert(Alpha + " 1");
    $.getJSON("http://freegeoip.net/json/?callback=?", function(location){
        Alpha = location.city;
        whenDone();
    }); 
}

function whenDone() {
    alert(Alpha + " 2");
    alert(Alpha + " 3");
}

$(document).ready(function() {
    Location();
});

在较新的 JavaScript 版本中，您可以利用 async/await 和 Promises 的强大功能以某种方式“等待”执行:

let Alpha;

function Location() {
  return new Promise((resolve, reject) => {
    $.getJSON("http://freegeoip.net/json/?callback=?", location => {
      resolve(location);
    }); 
  }
}

async function init() {
  try {
    let location = await Location();
    Alpha = location.city;
  } catch(error) {
    console.error(error);
  }
}

$(document).ready(function() {
  init();
});

这将需要您对某些功能进行 polyfill。

注意:较新版本的 jQuery 返回一个 Promise 兼容接口(interface)，您可以使用它来等待。我没有尝试过这个，但是将调用包装在 Promise 中无论如何都适用于旧版本。