Détails de la résolution des problèmes de séquence d'exécution AJAX dans JS (avec solutions)

Cet article explique principalement le problème de la résolution de l'ordre d'exécution de ajax en js. Jetons maintenant un coup d'œil à cet article sur la résolution de l'ordre d'exécution d'ajax

En JS, nous le ferons. Rencontrez des problèmes avec l'ordre d'exécution, en particulier l'ordre d'exécution d'AJAX. L'ordre d'exécution par défaut dans js est de haut en bas.

Regardez le morceau de code suivant

    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;	
  }

Puisque l'AJAX voici une requête asynchrone, 2 apparaîtra d'abord puis 1 dans le navigateur

Ceci apparaît Question : Si l'indicateur est par défaut à 0 et devient 1 après l'exécution d'AJAX, alors l'instruction if utilise en fait 0 pour porter le jugement, ce qui n'est pas cohérent avec notre objectif. Ce que nous voulons, c'est utiliser l'indicateur attribué après l'exécution d'AJAX. Faites un jugement if (si vous voulez en savoir plus, rendez-vous sur le site Web PHP chinois colonne Manuel de développement AJAX pour apprendre)

Solution :

Méthode du chapitre un

La raison pour laquelle un tel problème se produit est parce qu'AJAX utilise des requêtes asynchrones, donc si nous voulons afficher 1 puis 2, il suffit de changer AJAX vers la synchronisation, c'est-à-dire changez simplement async en false

De cette façon, si AJAX n'a ​​pas fini de s'exécuter, la page apparaîtra dans un état d'animation suspendue et cessera de s'exécuter uniquement lorsque le. Le rappel AJAX est terminé.

Bien sûr, nous utilisons AJAX pour asynchrone, donc la méthode ci-dessus peut être gérée comme ceci si vous rencontrez des besoins particuliers

La deuxième méthode

La deuxième méthode est plus couramment utilisée

Par exemple, le morceau de code suivant

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 est asynchrone. Nous voulons d'abord afficher 1, puis 2. Il suffit de mettre test2 dans la fonction de rappel de test

Comme ça

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)
}

Cet article se termine ici (si vous voulez en voir plus, rendez-vous sur le site PHP chinois Manuel d'utilisation AJAX colonne pour apprendre). Si vous avez des questions, vous pouvez les poser ci-dessous. Laissez un message avec une question.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!