1. ホーム
  2. jquery

[解決済み] AJAXを同期させる(SJAX)にはどうすればよいか

2022-02-10 03:21:06

質問事項

AJAXリクエストは、コントローラの応答を待ってから実行を継続するようにすることです。これは、AJAXをforループの中に実装したためです。

for (var i = 0; i <= qtg.length-1; i++) {
    index++;
    gq(type, objParams.intro + " #" + index, qtg[i]); // ajax request happens here
}

function gq(type, intro, qtg) {
    var new_question_params = "type=" + type+ "&intro=" + intro+ "&q=" + qtg;

    $.ajax({
        type: "POST",
        async: false, // async set to false doesnt do a thing
        url: "./cntlr/generate/",
        data: new_question_params,
        success: function(data, textStatus, jqXHR) {
             console.log("created order : " + (data.q.order));
        },
        dataType: "json"
    });
}

が期待される出力であること。

作成された順番:1

作成順:2

作成順 : 3

作成順 : 4

Ajaxが返ってくる。

作成された順序 : 4

作成順:2

作成順:1

作成順 : 3

何か思い当たることはありますか?

解決方法は?

回答

非同期はAJAXの実行を待つかもしれませんが、ループ内のあなたのコードはまだ同時にすべての4つの呼び出しを行っています。


ご提案

なぜループしているのかわかりませんが、ここはAJAXのコールバックを作るのに最適な場所です、こんな感じです。

var totalNumber = qtg.length;

function gq(type, intro, i) {
    var new_question_params = "type=" + type+ "&intro=" + intro+ "&q=" + qtg[i];

    $.ajax({
        type: "POST",
        async: false, // async set to false doesnt do a thing
        url: "./cntlr/generate/",
        data: new_question_params,
        success: function(data, textStatus, jqXHR) {
             console.log("created order : " + (data.q.order));
             if (i < totalNumber) 
                 gq(type, intro, i+1);
        },
        dataType: "json"
    });
}