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实现等比例缩放图片效果插件
Jul 24 Javascript
jQuery数组处理方法汇总
Jun 20 Javascript
jQuery EasyUI API 中文文档 - Form表单
Oct 06 Javascript
jQuery 计算iframe 窗口大小的方法
May 13 Javascript
jquery实现的一个文章自定义分段显示功能
May 23 Javascript
比较常见的javascript中定义函数的区别
Nov 09 Javascript
javascript实现全角转半角的方法
Jan 23 Javascript
Angular 2应用的8个主要构造块有哪些
Oct 17 Javascript
Bootstrap栅格系统的使用和理解2
Dec 14 Javascript
js实现倒计时秒杀效果
Mar 25 Javascript
Vue父组件监听子组件生命周期
Sep 03 Javascript
javascript实现前端分页功能
Nov 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
谈谈新手如何学习PHP 默默经典版本
2009/08/04 PHP
php中全局变量global的使用演示代码
2011/05/18 PHP
PHP+mysql实现的三级联动菜单功能示例
2019/02/15 PHP
jQuery 自动增长的文本输入框实现代码
2010/04/02 Javascript
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
2010/10/20 Javascript
Ajax执行顺序流程及回调问题分析
2012/12/10 Javascript
jquery解析json格式数据的方法(对象、字符串)
2015/11/24 Javascript
JavaScript Promise 用法
2016/06/14 Javascript
基于jQuery的select下拉框选择触发事件实例分析
2016/11/18 Javascript
微信小程序 自定义消息提示框
2017/08/06 Javascript
利用JS hash制作单页Web应用的方法详解
2017/10/10 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
2017/12/07 Javascript
webpack-url-loader 解决项目中图片打包路径问题
2019/02/15 Javascript
vue配置nprogress实现页面顶部进度条
2019/09/21 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
2019/09/26 Javascript
如何基于js判断浏览器版本
2020/02/20 Javascript
用js编写留言板
2020/03/17 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
2020/04/06 Javascript
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
基于JS实现操作成功之后自动跳转页面
2020/09/25 Javascript
[02:31]2014DOTA2国际邀请赛2009专访:干爹表现出乎意料 看好DK杀回决赛
2014/07/20 DOTA
python 解析XML python模块xml.dom解析xml实例代码
2014/02/07 Python
python实现逆波兰计算表达式实例详解
2015/05/06 Python
让Python更加充分的使用Sqlite3
2017/12/11 Python
利用scrapy将爬到的数据保存到mysql(防止重复)
2018/03/31 Python
Python爬取个人微信朋友信息操作示例
2018/08/03 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
Python读取YAML文件过程详解
2019/12/30 Python
Python批量将图片灰度化的实现代码
2020/04/11 Python
python 利用matplotlib在3D空间中绘制平面的案例
2021/02/06 Python
运动会广播稿100字
2014/01/11 职场文书
红旗渠导游词
2015/02/09 职场文书
火烧圆明园的观后感
2015/06/03 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书
七个Python必备的GUI库
2021/04/27 Python
疑《守望先锋2》A测截图泄露 或将推出新模式、新界面
2022/04/03 其他游戏