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 相关文章推荐
setTimeout与setInterval在不同浏览器下的差异
Jan 24 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
Dec 22 Javascript
JS表单验证的代码(常用)
Apr 08 Javascript
AngularJS 中文API参考手册
Jul 28 Javascript
Node.js调试技术总结分享
Mar 12 Javascript
js实现倒计时关键代码
May 05 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
Jul 04 Javascript
微信小程序实现图片上传功能
May 28 Javascript
Node.js Stream ondata触发时机与顺序的探索
Mar 08 Javascript
Vue路由对象属性 .meta $route.matched详解
Nov 04 Javascript
全面解析JavaScript Module模式
Jul 24 Javascript
如何手写简易的 Vue Router
Oct 10 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
再说下636单管机
2021/03/02 无线电
超小PHP小马小结(方便查找后门的朋友)
2012/05/05 PHP
解析PHP可变函数的经典用法
2013/06/20 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
js与C#进行时间戳转换
2014/11/14 Javascript
js图片模糊切换显示特效的方法
2015/02/17 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
2016/06/09 Javascript
javascript的document中的动态添加标签实现方法
2016/10/24 Javascript
JQuery实现动态操作表格
2017/01/11 Javascript
javascript基础练习之翻转字符串与回文
2017/02/20 Javascript
js实现楼层导航功能
2017/02/23 Javascript
JavaScript瀑布流布局实现代码
2017/05/06 Javascript
详解VueJs前后端分离跨域问题
2017/05/24 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
微信小程序整合使用富文本编辑器的方法详解
2019/04/25 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
2020/04/11 Javascript
vue-router 2.0 跳转之router.push()用法说明
2020/08/12 Javascript
[02:56]DOTA2英雄基础教程 巨魔战将
2013/12/10 DOTA
[06:07]DOTA2-DPC中国联赛 正赛 Ehome vs VG 选手采访
2021/03/11 DOTA
基于Django的ModelForm组件(详解)
2017/12/07 Python
python通过百度地图API获取某地址的经纬度详解
2018/01/28 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
La Redoute英国官网:法国时尚品牌
2017/04/27 全球购物
英国图书音像网站:Hive.co.uk(图书、电子书、DVD、蓝光、音乐CD等)
2017/10/16 全球购物
化学相关工作求职信
2013/10/02 职场文书
总裁岗位职责
2013/12/04 职场文书
安全协议书
2014/04/23 职场文书
班干部演讲稿
2014/04/24 职场文书
教师考核材料
2014/05/21 职场文书
禁毒宣传工作方案
2014/05/23 职场文书
质量安全标语
2014/06/07 职场文书
优质服务口号
2014/06/11 职场文书
上课睡觉检讨书300字
2014/11/18 职场文书
2019最新版试用期劳动合同模板!
2019/07/04 职场文书