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获取元素文档大小、偏移和位置和滚动条位置的方法集合
Jan 12 Javascript
jquery 循环显示div的示例代码
Oct 18 Javascript
Jquery Ajax方法传值到action的方法
May 11 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
Feb 10 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
Mar 02 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
Mar 23 Javascript
vue router2.0二级路由的简单使用
Jul 05 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
Sep 19 Javascript
Vue 页面跳转不用router-link的实现代码
Apr 12 Javascript
详解vantUI框架在vue项目中的应用踩坑
Dec 06 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
Mar 16 Javascript
vue动态绘制四分之三圆环图效果
Sep 03 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 开发环境配置(测试开发环境)
2010/04/28 PHP
PHP的fsockopen、pfsockopen函数被主机商禁用的解决办法
2014/07/08 PHP
PHP弱类型语言中类型判断操作实例详解
2017/08/10 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
ExtJs 3.1 XmlTreeLoader Example Error
2010/02/09 Javascript
Js注册协议倒计时的小例子
2013/06/24 Javascript
javascript实现动态模态绑定grid过程代码
2014/09/22 Javascript
javascript制作的滑动图片菜单
2015/05/15 Javascript
js实现防止被iframe的方法
2015/07/03 Javascript
jquery制作图片时钟特效
2020/03/30 Javascript
详解js中class的多种函数封装方法
2016/01/03 Javascript
浏览器复制插件zeroclipboard使用指南
2016/03/26 Javascript
JavaScript中递归实现的方法及其区别
2017/09/12 Javascript
使用webpack搭建react开发环境的方法
2018/05/15 Javascript
javascript实现计算指定范围内的质数示例
2018/12/29 Javascript
python中readline判断文件读取结束的方法
2014/11/08 Python
浅谈python中的面向对象和类的基本语法
2016/06/13 Python
python 编写简单网页服务器的实例
2018/06/01 Python
python多线程并发及测试框架案例
2019/10/15 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
Python matplotlib画图时图例说明(legend)放到图像外侧详解
2020/05/16 Python
keras的三种模型实现与区别说明
2020/07/03 Python
python三引号如何输入
2020/07/06 Python
回馈慈善的设计师太阳镜:DIFF eyewear
2019/10/17 全球购物
财务人员个人自荐信范文
2013/09/26 职场文书
教师实习期自我鉴定
2013/10/06 职场文书
高中生班主任评语
2014/04/25 职场文书
大学毕业生推荐信
2014/07/09 职场文书
平面设计专业求职信
2014/08/09 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
撤诉申请书法院范本
2015/05/18 职场文书
JavaScript 语句之常用 for 循环详解
2021/03/29 Javascript
MySQL的join buffer原理
2021/04/29 MySQL
一文搞懂redux在react中的初步用法
2021/06/09 Javascript
vue中控制mock在开发环境使用,在生产环境禁用方式
2022/04/06 Vue.js
Android Flutter实现图片滑动切换效果
2022/04/07 Java/Android