jQuery ajax时间差导致的变量赋值问题分析


Posted in Javascript onJanuary 22, 2016

本文实例分析了jQuery ajax时间差导致的变量赋值问题。分享给大家供大家参考,具体如下:

ajax异步请求,在各种特效方面,做出了不少的贡献,有了它让用户体验更好。下面说一下曾今遇到过的一个问题,今天又遇到了,又花了我一点时间,小问题,但是特别容易忽视,并且不容易想到是什么原因产生的。废话不多说,举个例子大家就明白了。

一、准备测试文件test.php和test.html

1. test.php

<?php
echo "1";
?>

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>3water.com</div>
</body>
</html>
<script type="text/javascript">
//js代码放到这里
</script>

二、问题举例

<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);不管msg返回什么,都只会弹出false,按javascript的执行原理,一般情况下都是顺序执行的,那为什么这个error的值没有被改变呢?原因就在于异步请求是有一个时间差的,为了验证这个时间差,在举个例子,可以让你清楚的看到,这个时间差。

三、验证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,二次弹出之间的时间差,就是ajax异步请求的时间差。从表面上看,这段js代码的执行顺序是这样的上--下--中,其实不是这样的,代码执行的顺序还是上--中--下。为什么会先执行下面的代码呢?那是因为ajax异步请求,需要时间,而js并没有去等待,所以在这里有一个时间差。

四、解决方法

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>

当你刷新页面时,这里是弹出二个true,为什么会这样呢?加了async:false后,就会有一个等待的过程,也就是说ajax不执行完,不执行下面的代码。用这个方法有个问题,如果等待的时间过长,用户体验很不好的。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
Jquery 基础学习笔记
May 29 Javascript
基于jquery的不规则矩形的排列实现代码
Apr 16 Javascript
JavaScript实现QueryString获取GET参数的方法
Jul 02 Javascript
JS对象与json字符串格式转换实例
Oct 28 Javascript
JavaScript对象学习小结
Sep 02 Javascript
基于JS设计12306登录页面
Dec 28 Javascript
微信小程序获取手机号授权用户登录功能
Nov 09 Javascript
详解vue的diff算法原理
May 20 Javascript
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
小程序开发中如何使用async-await并封装公共异步请求的方法
Jan 20 Javascript
Vue Prop属性功能与用法实例详解
Feb 23 Javascript
通过滑动翻页效果实现和移动端click事件问题
Jan 26 Javascript
jQuery简单获取键盘事件的方法
Jan 22 #Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
Jan 22 #Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 #Javascript
鼠标悬停小图标显示大图标
Jan 22 #Javascript
在JavaScript中call()与apply()区别
Jan 22 #Javascript
很全面的JavaScript常用功能汇总集合
Jan 22 #Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
Jan 22 #Javascript
You might like
一个ubbcode的函数,速度很快.
2006/10/09 PHP
php网页后退不再出现过期
2007/03/08 PHP
PHP实现通过中文字符比率来判断垃圾评论的方法
2014/10/20 PHP
php通过rmdir删除目录的简单用法
2015/03/18 PHP
PHP实现的购物车类实例
2015/06/17 PHP
PHP Yaf框架的简单安装使用教程(推荐)
2016/06/08 PHP
PHP实现与java 通信的插件使用教程
2019/08/11 PHP
PHP基于phpqrcode类生成二维码的方法示例详解
2020/08/07 PHP
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
Javascript Math对象
2009/08/13 Javascript
对xmlHttp对象的理解
2011/01/17 Javascript
javascript是怎么继承的介绍
2012/01/05 Javascript
jquery 获取dom固定元素 添加样式的简单实例
2014/02/04 Javascript
JS正则匹配中文的方法示例
2017/01/06 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
2017/04/11 jQuery
基于JS实现仿京东搜索栏随滑动透明度渐变效果
2017/07/10 Javascript
node.js博客项目开发手记
2018/03/16 Javascript
优雅的elementUI table单元格可编辑实现方法详解
2018/12/23 Javascript
vue+element UI实现树形表格带复选框的示例代码
2019/04/16 Javascript
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
Jquery Datatables的使用详解
2020/01/30 jQuery
python实现的解析crontab配置文件代码
2014/06/30 Python
Go语言基于Socket编写服务器端与客户端通信的实例
2016/02/19 Python
Python使用迭代器打印螺旋矩阵的思路及代码示例
2016/07/02 Python
Python3爬虫教程之利用Python实现发送天气预报邮件
2018/12/16 Python
python tkinter控件布局项目实例
2019/11/04 Python
pytorch 获取tensor维度信息示例
2020/01/03 Python
Python实现动态给类和对象添加属性和方法操作示例
2020/02/29 Python
HTML5的video标签的浏览器兼容性增强方案分享
2016/05/19 HTML / CSS
Dyson戴森波兰官网:Dyson.pl
2019/08/05 全球购物
函授毕业生自我鉴定
2013/11/06 职场文书
小学语文课后反思精选
2014/04/25 职场文书
改进作风怎么办发言材料
2014/08/17 职场文书
Pytorch实现图像识别之数字识别(附详细注释)
2021/05/11 Python
Go 内联优化让程序员爱不释手
2022/06/21 Golang
从原生JavaScript到React深入理解
2022/07/23 Javascript