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时间验证和转换工具小例子
Jul 01 Javascript
面向对象继承实例(a如何继承b问题)(自写)
Jul 01 Javascript
JS window对象的top、parent、opener含义介绍
Dec 03 Javascript
盘点javascript 正则表达式中 中括号的【坑】
Mar 16 Javascript
深入分析javascript中console命令
Aug 14 Javascript
使用cookie绕过验证码登录的实现代码
Oct 12 Javascript
在angularJs中进行数据遍历的2种方法
Oct 08 Javascript
Element Input组件分析小结
Oct 11 Javascript
JS栈stack类的实现与使用方法示例
Jan 31 Javascript
详解关于html,css,js三者的加载顺序问题
Apr 10 Javascript
在antd4.0中Form使用initialValue操作
Nov 02 Javascript
关于小程序优化的一些建议(小结)
Dec 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
重置版宣传动画
2020/04/09 魔兽争霸
PHILIPS D1835/D1875的电路分析与打理
2021/03/02 无线电
php pki加密技术(openssl)详解
2013/07/01 PHP
PHP函数http_build_query使用详解
2014/08/20 PHP
Laravel+jQuery实现AJAX分页效果
2016/09/14 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
超级强大的表单验证
2006/06/26 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
2012/08/14 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
2014/10/28 Javascript
jQuery中$(function() {});问题详解
2015/08/10 Javascript
什么是JavaScript注入攻击?
2016/09/14 Javascript
Express之get,pos请求参数的获取
2017/05/02 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
2017/06/18 Javascript
JS沙箱模式实例分析
2017/09/04 Javascript
vue双花括号的使用方法 附练习题
2017/11/07 Javascript
Node.js使用Express.Router的方法
2017/11/14 Javascript
解决Layui 表单提交数据为空的问题
2018/08/15 Javascript
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
浅析微信扫码登录原理(小结)
2018/10/29 Javascript
js实现延迟加载的几种方法详解
2019/01/19 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
2019/10/02 Javascript
python使用beautifulsoup从爱奇艺网抓取视频播放
2014/01/23 Python
python实现360皮肤按钮控件示例
2014/02/21 Python
PyTorch CNN实战之MNIST手写数字识别示例
2018/05/29 Python
Pytorch 计算误判率,计算准确率,计算召回率的例子
2020/01/18 Python
超全Python图像处理讲解(多模块实现)
2020/04/13 Python
python能否java成为主流语言吗
2020/06/22 Python
Python批量删除mysql中千万级大量数据的脚本分享
2020/12/03 Python
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
Keds加拿大官网:购买帆布运动鞋和皮鞋
2019/09/26 全球购物
Haggar官网:美国男装品牌
2020/02/16 全球购物
数字天堂软件测试面试题
2012/12/23 面试题
J2ee常用的设计模式?说明工厂模式
2015/05/21 面试题
搞笑创意广告语
2014/03/17 职场文书
idea下配置tomcat避坑详解
2022/04/12 Servers