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 相关文章推荐
推荐:极酷右键菜单
Nov 29 Javascript
JQuery下关于$.Ready()的分析
Dec 13 Javascript
jQuery对Select的操作大集合(收藏)
Dec 28 Javascript
javascript模拟map输出与去除重复项的方法
Feb 09 Javascript
TinyMCE汉化及本地上传图片功能实例详解
May 31 Javascript
Angular移动端页面input无法输入的解决方法
Nov 14 Javascript
vue 设置proxyTable参数进行代理跨域
Apr 09 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
Aug 09 Javascript
解决vue的变量在settimeout内部效果失效的问题
Aug 30 Javascript
Vue.js递归组件实现组织架构树和选人功能
Jul 04 Javascript
基于layui内置模块(element常用元素的操作)
Sep 20 Javascript
解决Antd Table组件表头不对齐的问题
Oct 27 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
法压式咖啡之制作法
2021/03/03 冲泡冲煮
PHP初学者头疼问题总结
2006/07/08 PHP
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
让的PHP代码飞起来的40条小技巧(提升php效率)
2010/04/12 PHP
强制PHP命令行脚本单进程运行的方法
2014/04/15 PHP
PHP函数分享之curl方式取得数据、模拟登陆、POST数据
2014/06/04 PHP
php采用session实现防止页面重复刷新
2015/12/24 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
js对象的比较
2011/02/26 Javascript
javascript 实现简单的table排序及table操作练习
2012/12/28 Javascript
js截取小数点后几位的写法
2013/11/14 Javascript
JavaScript四种调用模式和this示例介绍
2014/01/02 Javascript
JavaScript获取网页表单提交方式的方法
2015/04/02 Javascript
js窗口关闭提示信息(兼容IE和firefox)
2015/10/23 Javascript
Node.js与MySQL交互操作及其注意事项
2016/10/05 Javascript
初探js和简单隐藏效果的实例
2017/11/23 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
vue--vuex详解
2019/04/15 Javascript
el-table树形表格表单验证(列表生成序号)
2020/05/31 Javascript
浅谈vue中$bus的使用和涉及到的问题
2020/07/28 Javascript
Python对象转JSON字符串的方法
2016/04/27 Python
使用Python3 编写简单信用卡管理程序
2016/12/21 Python
Python里面search()和match()的区别
2016/09/21 面试题
销售主管的自我评价分享
2014/01/03 职场文书
积极分子思想汇报
2014/01/04 职场文书
群众路线剖析材料
2014/02/02 职场文书
办公设备采购方案
2014/03/16 职场文书
2014年毕业演讲稿范文
2014/05/13 职场文书
教师批评与自我批评
2014/10/15 职场文书
2015年工程部工作总结
2015/04/30 职场文书
搞笑结婚保证书
2015/05/08 职场文书
小人国观后感
2015/06/11 职场文书
行政处罚听证告知书
2015/07/01 职场文书
Python爬虫基础之初次使用scrapy爬虫实例
2021/06/26 Python
python编程学习使用管道Pipe编写优化代码
2021/11/20 Python
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫