JS での AJAX 実行順序問題解決の詳細 (解決策付き)-jsチュートリアル-php.cn

JS での AJAX 実行順序問題解決の詳細 (解決策付き)

寻∝梦

リリース： 2018-09-10 15:17:29

オリジナル

2342 人が閲覧しました

この記事では、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 サイトの他の関連記事を参照してください。