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 textarea自动增高并隐藏滚动条
Dec 16 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
Jan 02 Javascript
jQuery中:last选择器用法实例
Dec 30 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
Jul 28 Javascript
js实现弹窗居中的简单实例
Oct 09 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
Dec 26 Javascript
浅谈js算法和流程控制
Dec 29 Javascript
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
node通过express搭建自己的服务器
Sep 30 Javascript
面包屑导航详解
Dec 07 Javascript
webpack 3.X学习之多页面打包的方法
Sep 04 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 4.2书写安全的脚本
2006/10/09 PHP
PHP内核介绍及扩展开发指南―基础知识
2011/09/11 PHP
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
javascript div 弹出可拖动窗口
2009/02/26 Javascript
JavaScript 事件记录使用说明
2009/10/20 Javascript
javascript 类型判断代码分析
2010/03/28 Javascript
ExtJs 表单提交登陆实现代码
2010/08/19 Javascript
关于Mozilla浏览器不支持innerText的解决办法
2011/01/01 Javascript
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
JavaScript之HTMLCollection接口代码
2011/04/27 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
2014/11/28 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
2015/12/29 Javascript
基于jQuery实现二级下拉菜单效果
2016/02/01 Javascript
jQuery插件支持同一页面被多次调用
2016/02/14 Javascript
AngularJS directive返回对象属性详解
2016/03/28 Javascript
webpack4 升级迁移的实现
2018/09/12 Javascript
解决vue无法设置滚动位置的问题
2018/10/07 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
启动targetcli时遇到错误解决办法
2017/10/26 Python
对Python发送带header的http请求方法详解
2019/01/02 Python
Python设计模式之简单工厂模式实例详解
2019/01/22 Python
python for 循环获取index索引的方法
2019/02/01 Python
Python numpy中矩阵的基本用法汇总
2019/02/12 Python
Python List cmp()知识点总结
2019/02/18 Python
锐步美国官方网站:Reebok美国
2018/01/10 全球购物
Crabtree & Evelyn欧盟:豪华洗浴、身体和护发
2021/03/09 全球购物
党支部书记先进事迹
2014/01/17 职场文书
资源工程专业毕业生求职信
2014/02/27 职场文书
2015年基层党组织公开承诺书
2015/01/21 职场文书
2015年酒店客房部工作总结
2015/04/25 职场文书
2015年机关后勤工作总结
2015/05/26 职场文书
婚礼迎宾词大全
2015/08/10 职场文书
使用Springboot实现健身房管理系统
2021/07/01 Java/Android