jQuery中的ajax async同步和异步详解


Posted in Javascript onSeptember 29, 2015

项目中有这样一个需求,使用ajax加载数据返回页面并赋值,然后前端取出该值

这其中涉及到代码的顺序问题,有时后台还未返回数据,但已执行后面代码,

所以就会造成取不到值

$.ajax({ type: "post",  url: "admin/PfmOptionRuleItem.do", success: function(data){  $("#ruleItem").val(data.ruleItem); //① } }); return $("#ruleItem").val(); //②

如果①还未从后台返回数据 此时执行②就获取不到值

Ajax的第一个字母是asynchronous的开头字母,这意味着所有的操作都是并行的,完成的顺序没有前后关系。

$.ajax()的async参数总是设置成true,这标志着在请求开始后,其他代码依然能够执行。

如果把这个选项设置成false,这意味着所有的请求都不再是异步的了,这也会导致浏览器被锁死。

虽然官方不建议这么干,只是不能用太多,否则会造成用户体验不佳

举个栗子

alert("setp 1"); $.ajax({  url: "admin/PfmOptionRuleItem.do",  async: false,  success: function(data){   alert("hello ajax"); //①  } }); alert("setp 2"); //②

当把asyn设为false时,这时ajax的请求时同步的,也就是说,这个时候ajax块发出请求后,

他会等待在①这个地方,不会去向下执行②,直到①执行完毕

此时依次执行顺序为

setp 1

hello ajax

setp 2

如果async为true 则执行顺序为

setp 1

setp 2

hello ajax

关于本文给大家叙述的jQuery中的ajax async同步和异步,全部介绍完了,希望对大家有所帮助。

Javascript 相关文章推荐
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
Aug 09 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
Apr 07 Javascript
JS 对象(Object)和字符串(String)互转方法
May 20 Javascript
JS组件Bootstrap Select2使用方法解析
May 30 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
Jun 17 Javascript
微信小程序 参数传递详解
Oct 24 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
Dec 05 Javascript
js仿搜狐视频记录片列表展示效果
May 30 Javascript
ajax接收后台数据在html页面显示
Feb 19 Javascript
layui table设置前台过滤转义等方法
Aug 17 Javascript
JavaScript语句错误throw、try及catch实例解析
Aug 18 Javascript
JavaScript如何操作css
Oct 24 Javascript
网页从弹窗页面单选框传值至父页面代码分享
Sep 29 #Javascript
pace.js页面加载进度条插件
Sep 29 #Javascript
js强制把网址设为默认首页
Sep 29 #Javascript
jQuery EasyUI Dialog拖不下来如何解决
Sep 28 #Javascript
JQuery实现左右滚动菜单特效
Sep 28 #Javascript
JS动态日期时间的获取方法
Sep 28 #Javascript
js电话号码验证方法
Sep 28 #Javascript
You might like
用php和MySql来与ODBC数据连接
2006/10/09 PHP
PHP 小心urldecode引发的SQL注入漏洞
2011/10/27 PHP
ThinkPHP利用PHPMailer实现邮件发送实现代码
2013/09/26 PHP
PHP获取php,mysql,apche的版本信息示例代码
2014/01/16 PHP
PHP静态文件生成类实例
2014/11/29 PHP
PDO::quote讲解
2019/01/29 PHP
Laravel5.5 实现后台管理登录的方法(自定义用户表登录)
2019/09/30 PHP
关于innerHTML后丢失动态绑定的EVENT问题解决方法
2013/05/19 Javascript
Nodejs Post请求报socket hang up错误的解决办法
2014/09/25 NodeJs
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2015/04/01 Javascript
JavaSacript中charCodeAt()方法的使用详解
2015/06/05 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
2015/09/12 Javascript
深入探讨Vue.js组件和组件通信
2016/09/12 Javascript
小程序如何定位所在城市及发起周边搜索
2020/02/11 Javascript
vue动态合并单元格并添加小计合计功能示例
2020/11/26 Vue.js
[03:59]5分钟带你了解什么是DOTA2(第二期)
2017/02/07 DOTA
Python中__new__与__init__方法的区别详解
2015/05/04 Python
python 链接和操作 memcache方法
2017/03/04 Python
python简单实例训练(21~30)
2017/11/15 Python
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
使用Python完成15位18位身份证的互转功能
2019/11/06 Python
关于sys.stdout和print的区别详解
2019/12/05 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
使用html2canvas将页面转成图并使用用canvas2image下载
2019/04/04 HTML / CSS
Styleonme中文网:韩国高档人气品牌
2017/06/21 全球购物
美国沙龙美发产品购物网站:Hair.com by L’Oreal
2020/11/09 全球购物
比较基础的php面试题及答案-填空题
2014/04/26 面试题
电信专业毕业生推荐信
2013/11/18 职场文书
商务日语毕业生自荐信
2013/11/23 职场文书
大学班级学风建设方案
2014/05/01 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
放假通知范文
2015/04/14 职场文书
大学生暑假实习总结
2015/07/13 职场文书
公司劳动纪律管理制度
2015/08/04 职场文书