ホームページ > 記事 > ウェブフロントエンド > JS での AJAX 実行順序問題解決の詳細 (解決策付き)
この記事では、js での ajax の実行順序を解く問題を主に説明します。 ここで、ajax の実行順序を解く問題について説明します
JS では、特に の実行順序の問題が発生します。 AJAX の実行順序、js のデフォルトの実行順序は上から下です。
以下のコードを見てください
callback:function(value, validator, $field){ $.ajax({ url : window.ctx+"/sys/manager/validateLoginName", data:{loginName:value}, type : 'post', dataType : "json", async:true, success: function(result){ if(result!=null) globalVariable.flag=result; alert(1) }}); alert(2) if(globalVariable.flag!=1)return true; if(globalVariable.flag==1)return false; }
ここでの AJAX は非同期リクエストであるため、最初に 2 が表示され、次にブラウザに 1 が表示されます
これにより、フラグがデフォルトの 0 の場合、後で変更されます。 AJAX の実行が 1 になると、if ステートメントは実際には 0 を使用して判定を行いますが、これは目的と一致しません。これは、AJAX の実行後に割り当てられたフラグを使用して if 判定を行うことです (詳細を確認したい場合)。 、PHP 中国語 Web サイトにアクセスします AJAX 開発マニュアル の欄で学習します)
解決策:
最初の方法
このような問題が発生する理由は、AJAX が非同期リクエストを使用するためです。 1をポップアップさせてから2をポップアップさせたい AJAXを同期、つまりasyncをfalseに変更する必要があります
このように、AJAXの実行が完了していない場合、ページは一時停止アニメーションの状態で表示され、実行が停止されます。 AJAX コールバックが完了した場合にのみダウンします
もちろん、AJAX は非同期のためだけに使用します。そのため、特別なニーズが発生した場合、上記のメソッドはこのように処理できます
2 番目のメソッド
2 番目のメソッドはより一般的です使用
たとえば、次のコード
function test(){ $.ajax({ url : window.ctx+"/sys/manager/addUserRole", data:formData, type : 'post', dataType : "json", processData:false, contentType:false, success: function(result){ if(result!=null){ testCallback(); } }}); test2(); } function testCallback(){ alert(1) } function test2(){ alert(2) }
AJAXは非同期で、1をポップアップし、次に2をポップアップしたいとします。test2をtestのコールバック関数に置くだけです
このように
function test(){ $.ajax({ url : window.ctx+"/sys/manager/addUserRole", data:formData, type : 'post', dataType : "json", processData:false, contentType:false, success: function(result){ if(result!=null){ testCallback(); } }}); } function testCallback(){ alert(1) test2() } function test2(){ alert(2) }
この記事はここで終わります(さらに詳しく知りたい場合は、PHP 中国語 Web サイト (AJAX ユーザー マニュアル コラムで学習) にアクセスしてください。ご質問がある場合は、以下にメッセージを残してください。
以上がJS での AJAX 実行順序問題解決の詳細 (解決策付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。