getJSON（）の呼び出し後にJavaScript変数が空になる

Question

JSONファイルからデータをインポートする際にこの問題が発生しています。私は.getJSON関数を使用してコンソールログに従って動作することを意味するデータを取得しますが、一旦getJSONサブ関数から移動すると、data2の配列は消滅します。私はここでこのセクションに絞っています：

function prepData() { 
    data2 = []; 

    $.getJSON('http://localhost/data').done(function(json) { 
     data2 =json; 
     console.log(data2); 
    }); 

    console.log(data2); 
    SelectedData = data2; 
    return SelectedData; 
}; 

ここに問題がありますか？

Answer 1

あなたの機能：

function(json) { 
    data2 = json; 
} 

は、その時点ではまだ定義されていない

console.log(data2); SelectedData = data2; 

後

data2を実行します。

---

(1) function prepData(){ 
(2) data2 = []; 

(3) $.getJSON('http://localhost/data').done(function(json) { 
(4)  data2 =json; 
(5)  console.log(data2); 
     }); 

(6) console.log(data2); 
(7) SelectedData= data2; 
(8) return SelectedData; 
    }; 

実行順序：

1 -> 2 -> 3 -> 6 -> 7 -> 8 -> 4 -> 5 

---

共通プラクティス - データの代わりに戻り約束：

function prepData(){ 
    return $.getJSON('http://localhost/data'); 
} 

// more code here 

prepData().done(function(json){ 
    console.log(json); 
}); 

これらのより詳細なデモを見てみましょう。 ES5で
のjQuery：https://jsfiddle.net/DerekL/xtmy6po0/

function timeout(n){ 
    // create promise 
    var defer = $.Deferred(); 

    // resolve after n milliseconds 
    setTimeout(function(){ 
     defer.resolve(n); 
    }, n); 

    // return new promise that apply custom text 
    return defer.then(function(v){ 
     return "Resolved after " + (v/1000) + " seconds"; 
    }); 
} 

timeout(3000).then(function(message){ 
    // will be executed after 3 seconds 
    alert(message); 
}); 

等価ES7：それはあなたの次のコンソールステートメントに並列に実行されますので、https://jsfiddle.net/DerekL/8kLknbne/

async function timeout(n){ 
    // create timer 
    let timer =() => new Promise(resolve => setTimeout(() => resolve(n), n)); 
    // return message 
    return "Resolved after " + (await timer()/1000) + " seconds"; 
} 

// call 
timeout(3000).then(alert); 

Answer 2

$ .getJSONは非同期です。

$.getJSON('http://localhost/data'); 
console.log(data2); 
SelectedData= data2; 
return SelectedData; 

を：

Answer 3

の.doneはhttp://localhost/dataへの要求が

を完了したときに、これが最初に実行されます、それは後に他のスクリプトよりも数ミリ秒または秒を発生しますので、それが唯一の発生するイベントです数秒後の.doneイベントは、これは私の提案は、の.done FUである

data2 =json; 
console.log(data2); 

を実行します を解雇されますコード内で未定義として返される戻り値を待つ代わりに、応答を処理する別の関数を呼び出します。