如何在运行其余代码之前使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完成后运行的代码.这是jQuery文档中的一个示例.

var jqxhr = $.getJSON( "example.json", function() {
  console.log( "success" );
  })
  .done(function() {
    console.log( "second success" );
  })
  .fail(function() {
    console.log( "error" );
  })
  .always(function() {
    console.log( "complete" );
  });

jQuery文档

Answer 2

在您的代码中，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兼容接口，您可以使用它来等待。我还没有尝试过，但是将呼叫包装在Promise中仍然可以用于较旧的版本。