Analyse von Variablenzuweisungsproblemen, die durch jQuery Ajax Time Difference_jquery verursacht werden-js-Tutorial-php.cn

Analyse von Variablenzuweisungsproblemen, die durch jQuery Ajax Time Difference_jquery verursacht werden

WBOY

Freigeben： 2016-05-16 15:18:50

Original

1667 Leute haben es durchsucht

Das Beispiel dieses Artikels analysiert das Problem der Variablenzuweisung, das durch die Zeitdifferenz von jQuery Ajax verursacht wird. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Die asynchrone Anfrage von Ajax hat viele Beiträge zu verschiedenen Spezialeffekten geleistet. Dadurch wird die Benutzererfahrung verbessert. Lassen Sie uns über ein Problem sprechen, auf das Zeng Jin heute gestoßen ist, und es hat eine Weile gedauert. Es ist ein kleines Problem, aber es ist leicht zu ignorieren und es ist nicht einfach, über die Ursache nachzudenken. Lassen Sie uns ohne weitere Umschweife ein Beispiel geben und jeder wird es verstehen.

1. Bereiten Sie die Testdateien test.php und test.html vor

1. test.php

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

2. Fragebeispiele

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

Nach dem Login kopieren

Warnung (Fehler) im Code; unabhängig davon, welche Nachricht zurückgegeben wird, wird nur „false“ angezeigt. Gemäß dem Ausführungsprinzip von Javascript wird sie im Allgemeinen sequentiell ausgeführt. Warum wird der Wert dieses Fehlers nicht geändert? Der Grund dafür ist, dass es bei asynchronen Anforderungen einen Zeitunterschied gibt. Um diesen Zeitunterschied zu überprüfen, werde ich ein Beispiel geben, damit Sie diesen Zeitunterschied deutlich erkennen können.

3. Überprüfen Sie den Zeitunterschied der asynchronen Ajax-Anfrage

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

Nach dem Login kopieren

Wenn Sie die Seite aktualisieren, ist das Problem sehr klar. Das erste Popup ist falsch und dann ist das Popup wahr. Der Zeitunterschied zwischen den beiden Popups ist der Zeitunterschied der asynchronen Ajax-Anfrage. Oberflächlich betrachtet ist die Ausführungsreihenfolge dieses JS-Codes wie folgt: Oben – Unten – Mitte. Tatsächlich ist die Reihenfolge der Codeausführung immer noch oben – Mitte – Unten. Warum wird der folgende Code zuerst ausgeführt? Das liegt daran, dass die asynchrone Ajax-Anfrage Zeit braucht und js nicht wartet, sodass es hier einen Zeitunterschied gibt.

4. Lösung

1. Fügen Sie die tatsächlich auszuführende Aktion in die Rückruffunktion ein, um diesen Zeitunterschied zu vermeiden

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

Nach dem Login kopieren

Die vorherigen Beispiele dienen nur zur Veranschaulichung. Wenn Sie tatsächlich Code schreiben, würden Sie ihn nicht so schreiben, haha.

2. Stellen Sie eine Synchronisierungsanfrage

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

Nach dem Login kopieren

Wenn Sie die Seite aktualisieren, werden hier zwei echte Popups angezeigt. Nach dem Hinzufügen von async: false kommt es zu einem Warteprozess, was bedeutet, dass die Ausführung von Ajax nicht abgeschlossen wird und der folgende Code nicht ausgeführt wird. Bei dieser Methode gibt es ein Problem. Wenn die Wartezeit zu lang ist, ist die Benutzererfahrung sehr schlecht.

Leser, die an weiteren Inhalten im Zusammenhang mit jQuery Ajax interessiert sind, können sich das spezielle Thema dieser Website ansehen: „Zusammenfassung der Ajax-Nutzung in jquery“

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.