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 相关文章推荐
扩展String功能方法
Sep 22 Javascript
js正确获取元素样式详解
Aug 07 Javascript
js动态拼接正则表达式的两种方法
Mar 04 Javascript
js 针对html DOM元素操作等经验累积
Mar 11 Javascript
给js文件传参数(详解)
Jul 13 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
Dec 13 Javascript
JavaScript数据结构中串的表示与应用实例
Apr 12 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
May 02 Javascript
基于AngularJs select绑定数字类型的问题
Oct 08 Javascript
基于Three.js实现360度全景图片
Dec 30 Javascript
js 获取扫码枪输入数据的方法
Jun 10 Javascript
Vue基本指令实例图文讲解
Feb 25 Vue.js
网页从弹窗页面单选框传值至父页面代码分享
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
MySql中正则表达式的使用方法描述
2008/07/30 PHP
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
谈谈PHP连接Access数据库的注意事项
2016/08/12 PHP
一直复略了的一个问题,关于表单重复提交
2007/02/15 Javascript
学习js所必须要知道的一些
2007/03/07 Javascript
ext监听事件方法[初级篇]
2008/04/27 Javascript
jQuery 事件队列调整方法
2009/09/18 Javascript
js onload处理html页面加载之后的事件
2013/10/30 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
JavaScript中定义类的方式详解
2016/01/07 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
js定时器实现倒计时效果
2017/11/05 Javascript
mongoose更新对象的两种方法示例比较
2017/12/19 Javascript
使用vue制作探探滑动堆叠组件的实例代码
2018/03/07 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
node使用promise替代回调函数
2018/05/07 Javascript
vue的token刷新处理的方法
2018/07/17 Javascript
django使用channels2.x实现实时通讯
2018/11/28 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
2019/08/14 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
在Python的框架中为MySQL实现restful接口的教程
2015/04/08 Python
一道python走迷宫算法题
2018/01/22 Python
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
python中int与str互转方法
2018/07/02 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
python处理multipart/form-data的请求方法
2018/12/26 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
把vgg-face.mat权重迁移到pytorch模型示例
2019/12/27 Python
纯CSS3实现的阴影效果
2014/12/24 HTML / CSS
英国户外玩具儿童游乐设备网站:TP Toys(蹦床、攀爬框架、秋千、滑梯和游戏屋)
2018/04/09 全球购物
50道外企软件测试面试题
2014/08/18 面试题
如何在Shell脚本中使用函数
2015/09/06 面试题
保健品市场营销方案
2014/03/31 职场文书
2015人事行政工作总结范文
2015/05/21 职场文书
社团招新宣传语
2015/07/13 职场文书