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 相关文章推荐
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
Javascript load Page,load css,load js实现代码
Mar 31 Javascript
utf-8编码引起js输出中文乱码的解决办法
Jun 23 Javascript
JavaScript的事件绑定(方便不支持js的时候)
Oct 01 Javascript
谈谈JavaScript自定义回调函数
Oct 18 Javascript
懒加载实现的分页&&网站footer自适应
Dec 21 Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 Javascript
vuejs事件中心管理组件间的通信详解
Aug 09 Javascript
浅谈VUE单页应用首屏加载速度优化方案
Aug 28 Javascript
ES6 系列之 Generator 的自动执行的方法示例
Oct 19 Javascript
使vue实现jQuery调用的两种方法
May 12 jQuery
taro 实现购物车逻辑的实例代码
Jun 05 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/03/24 PHP
php实现根据字符串生成对应数组的方法
2014/09/22 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
HTML5如何适配 iPhone IOS 底部黑条
2021/03/09 HTML / CSS
jQuery Div中加载其他页面的实现代码
2009/02/27 Javascript
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
JavaScript中的作用域链和闭包
2012/06/30 Javascript
在JavaScript并非所有的一切都是对象
2013/04/11 Javascript
js 实现菜单上下显示附效果图
2013/11/21 Javascript
html判断当前页面是否在iframe中的实例
2016/11/30 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
Vue自定义全局Toast和Loading的实例详解
2019/04/18 Javascript
Webpack 4如何动态切割JS注入文件名详解
2019/07/09 Javascript
Vue的属性、方法、生命周期实例代码详解
2019/09/17 Javascript
js校验开始时间和结束时间
2020/05/26 Javascript
Nuxt配置Element-UI按需引入的操作方法
2020/07/06 Javascript
JavaScript枚举选择jquery插件代码实例
2020/11/17 jQuery
[01:34]2014DOTA2 TI预选赛预选赛 选手比赛房大揭秘!
2014/05/20 DOTA
python自动安装pip
2014/04/24 Python
在Python中使用列表生成式的教程
2015/04/27 Python
基于python中pygame模块的Linux下安装过程(详解)
2017/11/09 Python
pandas 透视表中文字段排序方法
2018/11/16 Python
分析经典Python开发工程师面试题
2019/04/08 Python
python实现tail -f 功能
2020/01/17 Python
opencv python 对指针仪表读数识别的两种方式
2021/01/14 Python
马德里竞技官方网上商店:Atletico Madrid Shop
2019/03/31 全球购物
Jones Bootmaker官网:优质靴子和鞋子在线
2020/11/30 全球购物
数控专业毕业生自荐信范文
2014/03/04 职场文书
初中生毕业评语
2014/12/29 职场文书
幼儿教师辞职信
2015/02/27 职场文书
党性教育心得体会(共6篇)
2016/01/21 职场文书
pytorch常用数据类型所占字节数对照表一览
2021/05/17 Python
教你漂亮打印Pandas DataFrames和Series
2021/05/29 Python
浅谈 JavaScript 沙箱Sandbox
2021/11/02 Javascript