Rumah >hujung hadapan web >tutorial js >Analisis masalah penugasan berubah yang disebabkan oleh jQuery ajax time difference_jquery

Analisis masalah penugasan berubah yang disebabkan oleh jQuery ajax time difference_jquery

WBOYasal: 2016-05-16 15:18:501664semak imbas

Contoh artikel ini menganalisis masalah tugasan pembolehubah yang disebabkan oleh perbezaan masa ajax jQuery. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Permintaan asynchronous Ajax telah membuat banyak sumbangan dalam pelbagai kesan khas Dengannya, pengalaman pengguna akan menjadi lebih baik. Mari kita bercakap tentang masalah yang Zeng Jin hadapi hari ini dan saya mengambil masa yang agak lama, tetapi ia mudah untuk diabaikan dan tidak mudah untuk memikirkan puncanya. Tanpa berlengah lagi, mari kita berikan contoh dan semua orang akan faham.

1. Sediakan fail ujian test.php dan test.html

1. php

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

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

2. Contoh soalan

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

Amaran(ralat) dalam kod; tidak kira apa mesej yang dikembalikan, hanya false yang akan muncul Menurut prinsip pelaksanaan javascript, ia biasanya dilaksanakan secara berurutan, jadi mengapa nilai ralat ini tidak berubah? Sebabnya ialah terdapat perbezaan masa dalam permintaan tak segerak Untuk mengesahkan perbezaan masa ini, saya akan memberikan contoh supaya anda dapat melihat dengan jelas perbezaan masa ini.

3. Sahkan perbezaan masa permintaan tak segerak 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>

Apabila anda memuat semula halaman, masalahnya sangat jelas Tetingkap timbul pertama adalah palsu, dan kemudian tetingkap timbul benar Perbezaan masa antara dua tetingkap timbul ialah perbezaan masa permintaan tak segerak. Di permukaan, susunan pelaksanaan kod js ini adalah seperti ini: atas - bawah - tengah Sebenarnya, ia tidak seperti ini. Mengapa kod berikut dilaksanakan dahulu? Itu kerana permintaan asynchronous ajax mengambil masa, dan js tidak menunggu, jadi terdapat perbezaan masa di sini.

4. Solusi

1. Letakkan tindakan sebenar yang akan dilakukan dalam fungsi panggil balik untuk mengelakkan perbezaan masa ini

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

Contoh sebelum ini hanyalah untuk ilustrasi Apabila anda benar-benar menulis kod, anda tidak akan menulisnya seperti itu, haha.

2. Buat permintaan penyegerakan

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

Apabila anda memuat semula halaman, dua benar muncul di sini. Mengapa ini? Selepas menambah async:false, akan ada proses menunggu, yang bermaksud bahawa ajax tidak akan selesai melaksanakan dan kod berikut tidak akan dilaksanakan. Terdapat masalah dengan kaedah ini Jika masa menunggu terlalu lama, pengalaman pengguna akan menjadi sangat teruk.

Pembaca yang berminat dengan lebih banyak kandungan berkaitan ajax jQuery boleh menyemak topik khas tapak ini: "Ringkasan penggunaan Ajax dalam jquery"

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Jenis rujukan untuk mengatur kemahiran JavaScript nota kajian_javascriptArtikel seterusnya：Jenis rujukan untuk mengatur kemahiran JavaScript nota kajian_javascript

Artikel berkaitan

Lihat lagi