ここには AJAX と Synchronicity に関する多くの質問が既にありますが、どういうわけか私の原因に対する正しい答えが見つかりませんでした。親切にしてください、私は初心者なので、これは重複している可能性があります. それでも、それをほのめかすだけでも、私や他の人が適切な答えを見つけるのに役立つかもしれません.
関数
$.fn.facebookEvents = function(options){
var fbEvents = 'https://graph.facebook.com/'+options.id+'/events/?access_token='+options.access_token+'&since=now&limit=500';
var events = [];
$.when($.getJSON(fbEvents)).then(function(json){
$.each(json.data, function(){
$.getJSON('https://graph.facebook.com/'+this.id+'/?access_token='+options.access_token, function(jsonData){
events.push(jsonData);
console.log(events); // here array "events" is filled successively
});
console.log(events); // here array "events" remains empty
});
}).done(function(){
$("#fb_data_live").html(
$("#fb_events").render(events)
);
});
};
この関数で発生するのは、Facebook ページのイベント リストに対する AJAX 呼び出し (jQuerys getJSON ショートハンド経由) です。これにより、各日付を表す JSON オブジェクトのリストが返されます。応答としての 1 つのオブジェクトの例:
{
"end_time": "2017-03-16T23:00:00+0100",
"location": "Yuca K\u00f6ln",
"name": "K\u00f6rner // G\u00e4nsehaut Tour 2017 // K\u00f6ln",
"start_time": "2017-03-16T20:00:00+0100",
"timezone": "Europe/Berlin",
"id": "985939951529300"
},
残念ながら、これらには必要な詳細が欠けています。これらは非表示 (ネスト) であり、2 番目の getJSON (関数の 8 行目) を作成した後、各オブジェクトの個別の「id」を使用して見つけることができます。現在、Facebook は次のように返信しています。
{
"description": "http://www.eventim.de/koerner\nTickets ab sofort exklusiv auf eventim.de und ab MI 07.09. \u00fcberall wo es Tickets gibt sowie auf contrapromotion.com.",
"end_time": "2017-03-16T23:00:00+0100",
"is_date_only": false,
"location": "Yuca K\u00f6ln",
"name": "K\u00f6rner // G\u00e4nsehaut Tour 2017 // K\u00f6ln",
"owner": {
"name": "K\u00f6rner",
"category": "Musician/Band",
"id": "366592010215263"
},
"privacy": "OPEN",
"start_time": "2017-03-16T20:00:00+0100",
"timezone": "Europe/Berlin",
"updated_time": "2016-09-28T10:31:47+0000",
"venue": {
"name": "Yuca K\u00f6ln"
},
"id": "985939951529300"
}
出来上がり、私が探していた詳細。この 2 回目の (ネストされた) AJAX 呼び出しを行った後、JSON データを配列「events」にプッシュします (12 行目)。
問題
これにより、すべての .each 反復で配列がいっぱいになります。ただし、2 つの「console.logs」を見てください。最初のものは塗りつぶされた配列を返し、2番目のものは空の配列を返します... AJAX呼び出しが同期的に行われている場合(これは本来あるべき方法ではありません)、たとえば$.ajaxSetup({async: false});関数の前に追加することによって、正常に動作しますが、 . 配列が埋められ、レンダリングできます (18 行目)。
質問
この動作はどのように説明でき、この機能を正しく実行するにはどうすればよいでしょうか? deferred と promise を使用する方法があるはずです。.when.then.done... を使用して、やったと思ったのは明らかです。
敬具、ユリウス