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 Docs

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();
});

这将要求您填充某些功能。

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

Answer 3

在回调函数中调用getJSON（）之后执行需要执行的逻辑，这就是函数意图，如下所示：

var Alpha;
function ineedtorunmorecode(){
    alert(Alpha + " 4");
}

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

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

Answer 4

无法使调用getJSON的函数等待。这样做与JavaScript用于异步事件的模型相反。在完成调用时要执行的任何代码必须在其中一个回调中（或从其中调用）。（或者你可以使用一个promise API，它在引擎盖下都是一样的但语法更好......）

Answer 5

因为它的异步功能不会等待，但是你可以用这样的方法清理你的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 6

不幸的是，在javascript中没有简单的等待方式。你必须使用回调函数。

Answer 7

在the documentation的示例中提到，当$.getJSON为done时，您可以执行代码。在这里你可以看到这个例子。我添加了一些console.log来向您展示代码的执行方式。

＆＃13;

(function() {
  console.log("Start Snippet");
  var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
  console.log("Start Load");
  $.getJSON( flickerAPI, {
    tags: "mount rainier",
    tagmode: "any",
    format: "json"
  })
    .done(function( data ) {
      console.log("End Load");
      $.each( data.items, function( i, item ) {
        $( "<img>" ).attr( "src", item.media.m ).appendTo( "#images" );
        if ( i === 3 ) {
          return false;
        }
      });
    });
  console.log("End Snippet");
})();

＆＃13;

img {
  height: 100px;
  float: left;
}

＆＃13;

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

＆＃13;

Answer 8

getJSON（）是Ajax的简写函数，因此， $ .ajaxSetup（{async：false}）;会成功的

如何在运行其余代码之前使getJSON等待？

8 个答案: