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

Question

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

最好的问候， 乔治

var Alpha; 
 

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

 
$(document).ready(function() { 
 
\t 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代码，你可以利用异步的电源/等待和承诺以某种方式“等待”执行：

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 2

这是不可能做出那个叫getJSON等待功能。这样做会违反JavaScript用于异步事件的模型。在完成调用后要执行的任何代码都必须位于其中一个回调中（或从中调用）。 （或者你可以使用一个承诺API，这是完全相同的，但更好的语法...）

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

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

var Alpha; 
 

 
function Location(){ 
 
\t alert(Alpha + " 1"); 
 

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

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

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

Answer 5

您可以指定在完成$ .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 6

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

Answer 7

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

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

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

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