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 相关文章推荐
jquery实现点击查看更多内容控制段落文字展开折叠效果
Aug 06 Javascript
Bootstrap3学习笔记(三)之表格
May 20 Javascript
三种带箭头提示框总结实例
Jun 14 Javascript
js实现无缝循环滚动
Jun 23 Javascript
JS比较两个数值的大小实例
Nov 25 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
Feb 21 Javascript
jquery实现焦点轮播效果
Feb 23 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
Sep 19 Javascript
JavaScript引用类型Array实例分析
Jul 24 Javascript
webpack4实现不同的导出类型
Apr 09 Javascript
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
网页从弹窗页面单选框传值至父页面代码分享
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教程归纳总结
2008/06/07 PHP
PHP网站基础优化方法小结
2008/09/29 PHP
使用淘宝IP库获取用户ip地理位置
2013/10/27 PHP
set_exception_handler函数在ThinkPHP中的用法
2014/10/31 PHP
php正则匹配文章中的远程图片地址并下载图片至本地
2015/09/29 PHP
PHP内部实现打乱字符串顺序函数str_shuffle的方法
2019/02/14 PHP
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
jQuery中noConflict()用法实例分析
2015/02/08 Javascript
JS简单实现String转Date的方法
2016/03/02 Javascript
第九篇Bootstrap导航菜单创建步骤详解
2016/06/21 Javascript
AngularJS控制器之间的数据共享及通信详解
2016/08/01 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
2016/12/06 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
js判断节假日实例代码
2017/12/27 Javascript
js中DOM事件绑定分析
2018/03/18 Javascript
一次微信小程序内地图的使用实战记录
2019/09/09 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
2020/12/14 Vue.js
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python pickle类库介绍(对象序列化和反序列化)
2014/11/21 Python
初步认识Python中的列表与位运算符
2015/10/12 Python
使用python为mysql实现restful接口
2018/01/05 Python
python 请求服务器的实现代码(http请求和https请求)
2018/05/25 Python
python变量赋值方法(可变与不可变)
2019/01/12 Python
python判断字符串或者集合是否为空的实例
2019/01/23 Python
python获取Pandas列名的几种方法
2019/08/07 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
tensorflow 实现自定义layer并添加到计算图中
2020/02/04 Python
python中的unittest框架实例详解
2021/02/05 Python
html5实现微信打飞机游戏
2014/03/27 HTML / CSS
松下电器美国官方商店:Panasonic美国
2016/10/14 全球购物
实习心得体会
2014/01/02 职场文书
质检部经理岗位职责
2014/02/19 职场文书
统计岗位职责
2014/02/21 职场文书
租房协议书
2014/09/12 职场文书
给原生html中添加水印遮罩层的实现示例
2021/04/02 Javascript
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL