html 5リフレッシュなしで複数のファイルをアップロード

問題の1つは、forループに複数のファイルをアップロードすることです.毎回このアップロードは問題ありませんが、サーバがファイルを処理した後、実行後の結果を返すと異常が発生します.

for(i=0;i<files.length;i++)
{
               f=files[i];
               xhr = new XMLHttpRequest();
                xhr.open("post", "@Url.Action("Fix")", true);
                xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
                var fd = new FormData();
                fd.append('file', f);
                xhr.send(fd);
                var picsize =f.size / 1024;
                _html = $("#Lists").html();
                _html += '<br/><strong>' + f.name + '</strong>(' + (f.type || "n/a") + ') - ' + picsize.toFixed(2);
                $("#Lists").html(_html);

                xhr.onreadystatechange = function () {
                     if(xhr.readyState==4){  
                        if(xhr.status==200){  
                        //do something with xhr.responseText;  
                            console.log(xhr.responseText);
                           var data = JSON.parse(xhr.responseText);
                            $("#result").append("<li>" + data.state + ',' + data.file + "</li>");
                        }     
                    }      
                
                };
}

ループが速すぎるため、古いxmlHttpreQuest応答を取得すると、最新に生成されたxmlhttpRequestに上書きされ、サービス側から返された結果は正しいが、上記のコードが実行されると、表示された応答結果は乱れ、例えば最後に提出されたファイルは、その状態が複数回表示される.
そしてsettimeOutを使用してxmlHttpRequestの生成速度を遅くして、毎回の応答がブラウザで処理された後、新しい応答が再生成されることを保証してもいいかと考えます.この書き方は遅延処理が得られないことに気づき、

for(i=0;i<10;i++)
{
   setTimeOut(alert(i));
}

forサイクルはsettimeOutを無視する.
関連資料を照会した後、再帰的な使い方.

var i=0;
function al()
{   
   i++;
   if(i<10) setTimeout(function(){alert("i="+i);al()},2000);
}
al();

は、問題を解決することができる.
やってみたが,確かに実行できる.

function upload(f) {
                xhr = new XMLHttpRequest();
                xhr.open("post", "@Url.Action("Fix")", true);
                xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
                var fd = new FormData();
                fd.append('file', f);
                xhr.send(fd);
                var picsize =f.size / 1024;
                _html = $("#Lists").html();
                _html += '<br/><strong>' + f.name + '</strong>(' + (f.type || "n/a") + ') - ' + picsize.toFixed(2);
                $("#Lists").html(_html);

                xhr.onreadystatechange = function () {
                     if(xhr.readyState==4){  
                        if(xhr.status==200){  
                        //do something with xhr.responseText;  
                            console.log(xhr.responseText);
                           var data = JSON.parse(xhr.responseText);
                            $("#result").append("<li>" + data.state + ',' + data.file + "</li>");
                        }     
                    }      
                
                };
  
        }
        var length = 0;
        var i = 0;
        function doit(files) {
            if(i<length-1) {
                setTimeout(function() {
                    alert(i);
                    upload(files[i]);
                    doit(files);
                    i++;
                },3000);
            }
        }

  ，      ，     xmlHttpRequest      。

   onreadystatechange     ：

         xhr.onreadystatechange = function () {
                     if(xhr.readyState==4){  
                        if(xhr.status==200){  
                        //do something with xhr.responseText;  
                            console.log(xhr.responseText);
                           var data = JSON.parse(xhr.responseText);
                            $("#result").append("<li>" + data.state + ',' + data.file + "</li>");
                            if(++i<files.length)
                            upload(files);
                        }     
                    }      
                
                };

      。