Analyse des problèmes d'affectation de variables causés par jQuery ajax time difference

Analyse des problèmes d'affectation de variables causés par jQuery ajax time difference_jquery

WBOY

Libérer： 2016-05-16 15:18:50

original

1664 Les gens l'ont consulté

L'exemple de cet article analyse le problème d'affectation de variables causé par le décalage horaire jQuery ajax. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

La requête asynchrone Ajax a apporté de nombreuses contributions dans divers effets spéciaux. Grâce à elle, l'expérience utilisateur sera meilleure. Parlons d'un problème rencontré par Zeng Jin. Je l'ai rencontré à nouveau aujourd'hui et cela m'a pris du temps, mais il est facile de l'ignorer et il n'est pas facile de penser à la cause. Sans plus attendre, donnons un exemple et tout le monde comprendra.

1. Préparez les fichiers de test test.php et test.html

1.test.php

<&#63;php
echo "1";
&#63;>

Copier après la connexion

2.test.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
<div>www.jb51.net</div>
</body>
</html>
<script type="text/javascript">
//js代码放到这里
</script>

Copier après la connexion

2. Exemples de questions

<script type="text/javascript">
function test(value){ //定义一个function
 error = false; //定义一个测试变量
 $.ajax({ //ajax异步请求
 type: "POST", //传值方式post
 url: "test.php", //异步请求的文件
 data: "name="+value, //异步请求的参数
 success: function(msg){ //请求成功的回调函数
 if($.trim(msg) == '1'){
 error = true; //返回值为1，把error变成true
 }
 }
 });
 alert(error); //打印一下error的内容，在这里你知道它会弹出什么吗？
 if(error == true){
 $("div").remove();
 }
}
test("good");
</script>

Copier après la connexion

Alerte(erreur) dans le code ; quel que soit le message renvoyé, seul false apparaîtra. Selon le principe d'exécution de javascript, il est généralement exécuté séquentiellement, alors pourquoi la valeur de cette erreur n'est-elle pas modifiée ? La raison en est qu'il existe un décalage horaire dans les requêtes asynchrones. Afin de vérifier ce décalage horaire, je vais donner un exemple afin que vous puissiez voir clairement ce décalage horaire.

3. Vérifiez le décalage horaire de la requête asynchrone ajax

<script type="text/javascript">
function test(value){
 error = false;
 $.ajax({
 type: "POST",
 url: "test.php",
 data: "name="+value,
 success: function(msg){
 if($.trim(msg) == '1'){
 error = true;
 alert(error); //在这里打印一下error
 }
 }
 });
 alert(error); //在这里打印一下error
 if(error == true){
 $("div").remove();
 }
}
test("good");
</script>

Copier après la connexion

Lorsque vous actualisez la page, le problème est très clair. La première pop-up est fausse, puis la pop-up est vraie. La différence de temps entre les deux pop-ups est la différence de temps de la requête asynchrone ajax. En apparence, l'ordre d'exécution de ce code js est le suivant : haut - bas - milieu. En fait, ce n'est pas comme ça. L'ordre d'exécution du code est toujours haut - milieu - bas. Pourquoi le code suivant est-il exécuté en premier ? C'est parce que la requête asynchrone ajax prend du temps et que js n'attend pas, il y a donc un décalage horaire ici.

4.Solution

1. Mettez l'action réelle à effectuer dans la fonction de rappel pour éviter ce décalage horaire

<script type="text/javascript">
function test(value){
 $.ajax({
 type: "POST",
 url: "test.php",
 data: "name="+value,
 success: function(msg){
 $("div").remove(); //实际要操作的动作
 }
 });
}
test("good");
</script>

Copier après la connexion

Les exemples précédents sont juste à titre d’illustration. Lorsque vous écrivez du code, vous ne l’écrivez pas comme ça, haha.

2. Faire une demande de synchronisation

<script type="text/javascript">
function test(value){
 error = false;
 $.ajax({
 type: "POST",
 url: "test.php",
 async: false, //进行同步请求，默认是true的
 data: "name="+value,
 success: function(msg){
 if($.trim(msg) == '1'){
 error = true;
 alert(error); //弹一下error
 }
 }
 });
 alert(error); //在弹一下error
 if(error == true){
 $("div").remove();
 }
}
test("good");
</script>

Copier après la connexion

Lorsque vous actualisez la page, deux vraies fenêtres apparaissent ici. Pourquoi ? Après avoir ajouté async:false, il y aura un processus d'attente, ce qui signifie qu'ajax ne terminera pas son exécution et que le code suivant ne sera pas exécuté. Il y a un problème avec cette méthode. Si le temps d’attente est trop long, l’expérience utilisateur sera très mauvaise.

Les lecteurs intéressés par davantage de contenu lié à jQuery ajax peuvent consulter le sujet spécial de ce site : "Résumé de l'utilisation d'Ajax dans jquery"

J'espère que cet article sera utile à tous ceux qui programment jQuery.