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

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

ちなみにこのsleepプラグインを使用した場合途中出力がされませんでした。「```lang-jQuery
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の使い方自体間違えてるような気もしますが。

行動規範の内容に同意します

回答2件

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

lang
1$(function(){
2
3    // 指定ミリ秒待機
4    var $delay = function (t) {
5        var d = $.Deferred();
6        setTimeout(function(){d.resolve()}, t);
7        return d.promise();
8    };
9
10    // Promise のリスト
11    var list = [];
12
13    for (var i=1 ; i<=10 ; i++) {
14        (function(){
15            var ii = i;
16            // $,ajax を呼ぶ関数をリストに追加
17            list.push(function(){
18                return $.ajax({
19                    type: "POST",
20                    url: "val.php" + '?' + ii,
21                    data: {val:ii},
22                })
23            });
24        }())
25
26        // delay を呼ぶ関数をリストに追加
27        list.push(function(){return $delay(1000)});
28    }
29
30    // リストの Promise を直列に実行
31    list.reduce(function(r, v){
32        return function(){
33            return r().then(v);
34        }
35    })();
36})