ホームページ > 記事 > ウェブフロントエンド > jQueryによる変数代入問題の解析 ajax時差_jquery
jQueryによる変数代入問題の解析 ajax時差_jquery
- WBOYオリジナル
- 2016-05-16 15:18:501661ブラウズ
この記事の例では、jQuery ajax 時間差によって引き起こされる変数割り当ての問題を分析します。参考のために皆さんと共有してください。詳細は次のとおりです:
Ajax 非同期リクエストは、さまざまな特殊効果に多大な貢献をしており、ユーザー エクスペリエンスが向上します。 Zeng Jin が今日も遭遇した問題について話しましょう。これは小さな問題ですが、原因を考えるのは簡単ではありません。早速、例を挙げてみましょう。誰もが理解できるでしょう。
1. テストファイル test.php と test.html を準備します
1.test.php
<?php echo "1"; ?>
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. 質問例
<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>
Alert(error); JavaScript の実行原理によれば、通常、このエラーの値は変更されないのですか?その理由は、非同期リクエストには時間差が存在するためです。この時間差を確認するために、この時間差が明確にわかるように例を示します。
3. 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>
ページを更新すると、最初のポップアップが false で、その後のポップアップが true であることがわかります。2 つのポップアップ間の時間差は、ajax 非同期リクエストの時間差です。表面的には、この JS コードの実行順序は上--下--中央のようになっていますが、実際には、コードの実行順序は依然として上--中-下というわけではありません。次のコードが最初に実行されるのはなぜですか?それは、ajaxの非同期リクエストは時間がかかり、jsは待たないため、ここで時間差が生じてしまいます。
4. 解決策
1. この時間差を避けるために、実際に実行するアクションをコールバック関数に記述します
<script type="text/javascript">
function test(value){
$.ajax({
type: "POST",
url: "test.php",
data: "name="+value,
success: function(msg){
$("div").remove(); //实际要操作的动作
}
});
}
test("good");
</script>
上記の例は単なる説明のためのものです。実際にコードを書くときは、そのようなコードは書きません (笑)。
2. 同期リクエストを作成します
<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>
ページを更新すると、ここに 2 つの true が表示されます。これはなぜですか? async:false を追加すると、待機プロセスが発生するため、ajax の実行が完了せず、次のコードは実行されません。この方法には問題があり、待ち時間が長すぎるとユーザー エクスペリエンスが非常に悪くなります。
さらに jQuery ajax 関連のコンテンツに興味のある読者は、このサイトの特別トピック「jquery での Ajax の使用法の概要」
をチェックしてください。この記事が jQuery プログラミングのすべての人に役立つことを願っています。