jQuery：getメソッドを使用してサイクル内の多くのファイルを読み込みます。

Question

サイクル内でjQueryのGETメソッドを使用してテキストファイルを読み込んでいます。返された情報で、select要素にいくつかのオプションを追加します。私の問題は、オプションが混乱することがあることです。私のコードは次の通りです：

for (var i = 1; i <= n; i++) 
{ 
    $.get("./file" + i + ".txt", function(data) { 
     $("select").append("<option>" + data + "</option>"); 
    }); 
} 

私はすべてのデータを1ファイルにマージすることを含まない解決策を見つけようとしています。助けてくれてありがとう！

Answer 1

私の問題は、オプションが混乱することがあることです。

問題：それはasync呼び出しが原因である私のコードは次のようです。あなたの現在のコードは単にファイルにリクエストを送り、次の繰り返しにジャンプし、リクエストを送信して次のようにジャンプします。レスポンスがいつ復帰するかは制御できません。

ソリューション：あなたがのためにループ上再帰関数を使用する場合はasyncプロセスとそのはるかに良いを扱っているので。私の言いたいことを理解するために、以下のコードを見てください。あなたは何n変数はそのスコープで利用可能であることを考えると、あまりにも私のコードであるように私はそれを使用しているあるの詳細を提供していないので

function GetFile(fileNumber) { 
 
    $.get("./file" + fileNumber + ".txt", function(data) { 
 
    $("select").append("<option>" + data + "</option>"); 
 
    fileNumber++; // since the files was read successfully lets increment the number to next file 
 
    if(fileNumber <= n){ // if we have not reached the limit 
 
     GetFile(fileNumber); // get the next file 
 
    } 
 
    }); 
 
} 
 

 
GetFile(1); //initiate the recursive function by passing the first number

。解決策を説明する

：私は数をインクリメントし、その小さいかどうかをチェックしますget機能のsuccessコールバック内で名前"file" + fileNumber + ".txt"でファイルを入力として数をとり、get要求を行う機能を作成します。限界に等しいnそれ以下であれば、新しい番号を渡すことによって同じ機能を呼び出します。これは限界に達するまで続きます。

注：要求のいずれかにエラーがある場合、上記のロジックは停止します。しかし、応答にエラーがあっても処理を続行したい場合は、.fail()ハンドラを追加することができます。以下を参照してください。

$.get("./file" + fileNumber + ".txt", function(data) { 
    //above shown logic 
    }).fail(function() { 
    console.log("There was an error while fetching file"+fileNumber +".txt"); 
    fileNumber++; 
    if(fileNumber <= n){ // see if next file exist 
     console.log("Processing next file!!"); 
     GetFile(fileNumber); // get the next file 
    } 
    });