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 相关文章推荐
解决js数据包含加号+通过ajax传到后台时出现连接错误
Aug 01 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
Nov 17 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
Sep 09 Javascript
js实现的奥运倒计时时钟效果代码
Dec 09 Javascript
JavaScript设计模式初探
Jan 07 Javascript
JS JSOP跨域请求实例详解
Jul 04 Javascript
JS 数字转换为大写金额的简单实例
Aug 04 Javascript
vue.js绑定class和style样式(6)
Dec 09 Javascript
Node.js之网络通讯模块实现浅析
Apr 01 Javascript
vue中如何去掉空格的方法实现
Nov 09 Javascript
JS实现移动端在线签协议功能
Aug 22 Javascript
何时使用Map来代替普通的JS对象
Apr 29 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
php文章内容分页并生成相应的htm静态页面代码
2010/06/07 PHP
PHP递归算法的详细示例分析
2013/02/19 PHP
Linux安装配置php环境的方法
2016/01/14 PHP
jquery 插件 任意位置浮动固定层
2008/12/25 Javascript
javascript中indexOf技术详解
2015/05/07 Javascript
jQuery学习笔记之回调函数
2016/08/15 Javascript
ajax的分页查询示例(不刷新页面)
2017/01/11 Javascript
bootstrap table表格使用方法详解
2017/04/26 Javascript
angularjs实现分页和搜索功能
2018/01/03 Javascript
Node.js使用Koa搭建 基础项目
2018/01/08 Javascript
vue动态路由配置及路由传参的方式
2018/05/23 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
2018/09/16 Javascript
vue-cli3单页构建大型项目方案
2020/04/07 Javascript
[01:16:12]完美世界DOTA2联赛PWL S2 FTD vs Inki 第一场 11.21
2020/11/23 DOTA
Linux上使用Python统计每天的键盘输入次数
2019/04/17 Python
python的内存管理和垃圾回收机制详解
2019/05/18 Python
多版本python的pip 升级后, pip2 pip3 与python版本失配解决方法
2019/09/11 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
OpenCV+python实现实时目标检测功能
2020/06/24 Python
Django怎么在admin后台注册数据库表
2020/11/14 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
使用CSS3编写类似iOS中的复选框及带开关的按钮
2016/04/11 HTML / CSS
详解h5页面在不同ios设备上的问题总结
2019/03/01 HTML / CSS
英国在线电子和小工具商店:TecoBuy
2018/10/06 全球购物
大专应届生个人简历的自我评价
2013/10/15 职场文书
教师专业理论水平的自我评价分享
2013/11/09 职场文书
信息技术专业个人自我评价
2013/12/11 职场文书
高三政治教学反思
2014/02/06 职场文书
个人安全生产承诺书
2014/05/22 职场文书
校园文明标语
2014/06/13 职场文书
护士2014年终工作总结
2014/11/11 职场文书
党小组考察意见
2015/06/02 职场文书
2016中秋节晚会开场白
2015/11/26 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle