1

以下のコードは、実行すると機能しますが、どういうわけか投稿が順番に追加されていないようです（post_21番目とpost_42番目の場合もあります）。

var posts = [
    "post_1.md",
    "post_2.md",
    "post_3.md",
    "post_4.md",
    "post_5.md",
    "post_6.md",
    "post_7.md"];

for (var i in posts) {
    $.ajax({
        url: "posts/" + posts[i],
        context: document.body,
        success: function (mdText) {
            var converter = new Showdown.converter();
            var htmlText = converter.makeHtml(mdText);
            $("body").append(htmlText);
        }
    });
}

配列内の要素をループし、要素ごとにMarkdownドキュメントをダウンロードし、HTMLに変換して、本文に追加します。for単純なループとアンダースコアの_.each()関数を試しました。3つすべてが同じ結果になります。実行すると、ドキュメントが順番に追加されません（したがって、[更新]をクリックすると、タイトルの順序が異なります）。これが発生する理由とそれを修正する方法はありますか？

4

2 に答える 2

5

$.ajaxは非同期関数です。つまり、すべての$.async関数が並行して実行され、完了する順序で本文に追加されます (これは、フェッチするドキュメントのサイズと一般的なネットワーク レイテンシによって明らかに異なります)。

async.jsライブラリを調べると、AJAX 呼び出しを並行して実行し、すべてが完了したらコールバックを実行できます。async.parallel最終的なコールバックに各 AJAX 呼び出しの結果を配列として渡す関数を使用することをお勧めします。

于 2013-03-09T19:48:54.993 に答える
2

これはまさにjQueryのタイプであり$.when、deferred.done支援することを目的としています。一連の遅延を渡し（jQueryは遅延を$.ajax返します）、それらの約束が解決されたら、それぞれを個別に処理できます。jQueryのAPIドキュメント自体からの変更された例を次に示します。

$.when( $.ajax("/page1.php"), $.ajax("/page2.php") ).done(function( a1, a2 ) {
  /* a1 and a2 are arguments resolved for the page1 and page2 ajax requests */
});

渡されたコールバック関数は.done、promiseがすべて解決された場合にのみ実行されます。したがって、page2のリクエストはpage1の前に完了する可能性がありますが、関係ありません。すべてのリクエストが完了するまで、コードは呼び出されません。

非同期リクエストの数が不明で変化する特定のケースでは、func.apply代わりに次のコマンドを使用すると、より多くの成功を収めることができます。

var reqs = [];

reqs.push( $.ajax("post_1.md"), $.ajax("post_2.md"), $.ajax("post_3.md") );

$.when.apply(this, reqs).done(function () {
    $.each(arguments, function (index, value) {
        console.log( value[0] );
    });
});
于 2013-03-09T20:05:15.793 に答える