2017-06-27 6 views
1

私はファイルをアップロードするためのスクリプトを書いています。アップロードが行われる前にファイルが存在するかどうかをチェックして、最後にユーザーに上書きオプションを提示します。Javascriptコールバック - 間違った順序で実行する

通常のフローからコードを取り出して、別の問題がそれに影響していないことを確認しました。

phpスクリプトを実行して結果を返すためにajaxを使用する関数にファイル名を渡します。

この結果をコールバックに戻して処理を続行します。

助けてください私は、彼らが(1,2,3)を発射することを期待する順序を示してアラートを追加したが、それらは異なる順序(1,3,2)

に発射されています。

 function Test() {    
     FileExists("Faces.png", function() { 
      alert("3"); 
      }); 
     } 

     function FileExists(Filename, callback) 
     { 
     var res; 
     var Obj = new Object(); 

     Obj.function = 'FileExists'; 
     Obj.Filename = Filename; 

     alert("1"); 

     $.ajax({ 
      url: "upload.php", 
      dataType: "text", 
      type: "POST", 
      data: Obj, 
      cache: false, 
      success: function (data) { 
       alert("2"); 

       if (data == "1") 
        res = true; 
       else 
        res = false; 
      }, 
      error: function (xhr, ajaxOptions, thrownError) { 
       alert(xhr.status); 
       alert(thrownError); 
       res= false; 
      } 
     }); 

     if(callback) callback(res); 
     } 

答えて

3

あなたのコールバックは成功とエラー関数で実行する必要があります。次のように

//Initialize callback with an empty function if not provided 
callback = callback || function() {}; 

$.ajax({ 
     url: "upload.php", 
     dataType: "text", 
     type: "POST", 
     data: Obj, 
     cache: false, 
     success: function (data) { 
      alert("2"); 

      if (data == "1") 
       callback(true); 
      else 
       callback(false); 
     }, 
     error: function (xhr, ajaxOptions, thrownError) { 
      alert(xhr.status); 
      alert(thrownError); 
      callback(false); 
     } 
    }); 

現在実行が動作する方法は、次のとおりです。

  1. FileExistsが呼び出されます。
  2. alert(1)が呼び出されます。
  3. Ajax要求が発生しました(これは非同期で発生します)。 $.ajaxはすぐに戻りますが、要求はキューに入れられ、最終的にブラウザによって実行されます。
  4. callbackが存在する場合はresで呼び出され、この時点では未定義です。
  5. Ajaxリクエストが完了しました。成功関数またはエラー関数のいずれかが呼び出されると、resはtrueまたはfalseに設定されます(関数が既に返ってきたため、resは何も起こりません)。
関連する問題