質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.61%

  • jQuery

    6529questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

jQueryで、forでajaxリクエストするとき、ループ速度が速すぎる。

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,943
退会済みユーザー

退会済みユーザー

最近jQueryとjavascriptの勉強を始めましたが、
以下のようにforを使い、任意の回数ajaxリクエストを実行し、そのつど結果を表示するものを作りたいと思っています。
しかしループ速度が速すぎて最後の結果しか見えません。
どうすればいいでしょうか。
またボタンクリックで中断もできるようにしたいです。

ちなみにこのsleepプラグインを使用した場合途中出力がされませんでした。「
for(var i=1 ; i<=10 ; i++){
             $.ajax({
                type: "POST",
                url: "hoge.php",
                data: data
                success: function(data, dataType)
                {

                    document.getElementById( 'result' ).innerHTML = data;
                    
                },
                error: function(XMLHttpRequest, textStatus, errorThrown)
                {
                    alert('Error : ' + errorThrown);
                }
            });
}

-----追記-----
説明が不十分すぎて何がしたいのか分からなかったと思います。ごめんなさい。
利用者がいくつかの項目を入れるとそれを元にPHP側で特定の式で計算、あたりorはずれを表示するゲームのようなものを作っています。
今のところボタン連打しないと続けて遊ぶことができないので、それをある程度自動化しようと思ったわけです。
・項目入力後、ボタンクリック

・指定回数ループ

・結果を確認しながら中止もできる
ようにしたかったのです。
なんかajaxの使い方自体間違えてるような気もしますが。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+1

この質問だけからなら、

1. for文で廻さず、success が来て、処理が終わってから次の通信をあらためて行う。
2. for文で回し、結果を 配列などで管理し、順番に表示する。
3. サーバ側で sleepしてから返す。(何のために :-)

のどれかが解になるでしょうが、実際のサービスのことを考えれば、

1. なるべく通信回数を減らす。(一括でとれるならそれに越したことはない)
2. 処理が別なら一度に行わない。(意味が違う通信は、for文で廻したりしない)
3. ポーリングしたいだけなら server pushも検討する。(1度の接続のみでOK)

ということを提案することになるでしょうね。

あと ajaxの場合、一度にいくつもリクエストをすると、
返答が互い違いに来ることも検討しなくてはいけませんよ。
順番が守られることは保証されません。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

Promise のリストを作って直列に繋げる方法を思いつきました(初学者向けではありません・・・)

$(function(){

    // 指定ミリ秒待機
    var $delay = function (t) {
        var d = $.Deferred();
        setTimeout(function(){d.resolve()}, t);
        return d.promise();
    };

    // Promise のリスト
    var list = [];

    for (var i=1 ; i<=10 ; i++) {
        (function(){
            var ii = i;
            // $,ajax を呼ぶ関数をリストに追加
            list.push(function(){
                return $.ajax({
                    type: "POST",
                    url: "val.php" + '?' + ii,
                    data: {val:ii},
                })
            });
        }())

        // delay を呼ぶ関数をリストに追加
        list.push(function(){return $delay(1000)});
    }

    // リストの Promise を直列に実行
    list.reduce(function(r, v){
        return function(){
            return r().then(v);
        }
    })();
})

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • jQuery

    6529questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。