残りのコードを実行する前に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が非同期的に結果を返します。これは、実行中にコードが実行され続けることを意味します。

あなたは何も結果がそうのように返される前に実行されていないことを確認するために、成功コールバックにコードを移動することができます：新しいJavaScriptのバージョンでは

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

、あなたは非同期の力を活用することができます/待つと何らかの形で実行を待つことを約束します：

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で呼び出しをラップすると、とにかく古いバージョンで動作します。

Answer 2

getJSON待ちという関数を作成することはできません。これを行うと、JavaScriptが非同期イベント用に使用するモデルに反することになります。コールの完了時に実行されるコードは、コールバックの1つ（または呼び出されたもの）でなければなりません。 （または、あなたは、フードの下ですべて同じですが、より良い構文...）

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

残念ながら、ジャバスクリプトで待機する簡単な方法はありません。コールバック関数を使用する必要があります。

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>