関数が配列を返さないのはなぜですか？

Question

function getContent(type) { 
    var content = []; 
    $.get(`/${type}.json`, function(data) { 
    $.each(data, function(index, hash) { 
     content.push(hash); 
    }); 
    // 1. content = [object, object, etc..] 
    }); 
    // 2. content = [] 
    return content; 
} 

これを理解する助けが必要です。 2番目のコメントでcontentが空白なのはなぜですか？その外観から、関数は最初に明示的に作成したコンテンツを参照するのではなく、contentという新しい変数にハッシュをプッシュし始めます。これをどうやって解決するのですか？なぜJavaScriptのスコープが混乱しているのですか？

また、これを修正するために、私はグローバル変数を使用しました。私の関数は、関数内のどこでもグローバル変数contentにアクセスできますが、最初の関数でcontentを呼び出すと、特定の場所にアクセスすることはできません。

Answer 1

$.getは非同期です。この呼び出しの性質は、イベントループに入り、現在のプログラムフローを変更しないということです。

コールバックを使用する必要があります。

function getContent(type, callback) { 
    var content = []; 
    $.get(`/${type}.json`, function(data) { 
    $.each(data, function(index, hash) { 
     content.push(hash); 
    }); 
    callback(content); 
}); 
} 

getContent("items", function(content) { 
    console.log(content); 
}); 

は、あなたもあなたの流れを使用することができ、より良い例を与えるが、それは次のようになります。

function getContent(type, callback) { 
    var content = []; 
    $.get(`/${type}.json`, function(data) { 
    $.each(data, function(index, hash) { 
     content.push(hash); 
    }); 
    callback(); 
    }); 
    return content; 
} 

var items = getContent("items", function() { 
    console.log(items); 
});