浅谈js的ajax的异步和同步请求的问题


Posted in Javascript onOctober 07, 2016

先来看以下代码:

var flag=true;
var index=0;
$.ajax({
  url: "https://3water.com/",
  success: function(data){
    flag=false;
  }  
});
while(flag){
  index++;
}
alert(index);

请问最后alert的index的结果是多少?

可能有人会说0呗。实际上却没那么简单。大家可以自己试试看。可以看到最终程序进入了一个死循环!怎么会这样呢!

我们在看一段代码:

var flag=true;
$.ajax({
  url: "https://3water.com/",
  success: function(data){
    flag=false;
  }  
});
alert(flag);

大家看最后alert出flag的值是多少呢?没错,是true!为什么呢?明明我们在ajax请求成功了将flag设为false,怎么还是true呢?这实际上是Ajax的异步机制造成的。

这里解释一下,同步和异步。js是单线程的,由于执行ajax请求会消耗一定的时间,甚至出现了网络故障而迟迟得不到返回结果;这时,如果同步执行的话,就必须等到ajax返回结果以后才能执行接下来的代码,如果ajax请求需要1分钟,程序就得等1分钟。如果是异步执行的话,就是告诉ajax代码“老兄,既然你迟迟不返回结果,我先不等你了,我还有一大堆代码要执行,等你执行完了给我说一下”。

Ajax默认是异步请求的,所以就出现了上面我们看到的结果。也就是ajax里面的代码还没有执行完,先执行了下面的代码。

那么如何使Ajax执行同步请求呢?这就需要设置async。

代码如下:

var flag=true;
var index=0;
$.ajax({
  url: "https://3water.com/",
  async:false,
  success: function(data){
    flag=false;
  }  
});
while(flag){
  index++;
}
alert(index);

async默认是true,也就是异步,我们设置为false,即为同步。这时我们再看看结果吧。

以上就是小编为大家带来的浅谈js的ajax的异步和同步请求的问题全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
javascript时区函数介绍
Sep 14 Javascript
关于javascript中的typeof和instanceof介绍
Dec 04 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
Apr 17 Javascript
快速学习jQuery插件 Cookie插件使用方法
Dec 01 Javascript
Bootstrap入门书籍之(三)栅格系统
Feb 17 Javascript
jQuery实现给input绑定回车事件的方法
Feb 09 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
Mar 13 Javascript
关于使用axios的一些心得技巧分享
Jul 02 Javascript
详解vue.js移动端导航navigationbar的封装
Jul 05 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
Nov 21 Javascript
JavaScript中的this妙用实例分析
May 09 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
Jun 22 Javascript
jquery删除table当前行的实例代码
Oct 07 #Javascript
JS控制FileUpload的上传文件类型实例代码
Oct 07 #Javascript
jQuery+正则+文本框只能输入数字的实现方法
Oct 07 #Javascript
JS只能输入正整数的简单实例
Oct 07 #Javascript
js判断价格,必须为数字且不能为负数的实现方法
Oct 07 #Javascript
JS验证 只能输入小数点,数字,负数的实现方法
Oct 07 #Javascript
JavaScript SHA512加密算法详细代码
Oct 06 #Javascript
You might like
APACHE的AcceptPathInfo指令使用介绍
2013/01/18 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
PHP使用php-resque库配合Redis实现MQ消息队列的教程
2016/06/29 PHP
php常用字符函数实例小结
2016/12/29 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
JS类库Bindows1.3中的内存释放方式分析
2007/03/08 Javascript
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
js定时器(执行一次、重复执行)
2014/03/07 Javascript
js判断手机和pc端选择不同执行事件的方法
2015/01/30 Javascript
教你JS中的运算符乘方、开方及变量格式转换
2016/08/09 Javascript
JavaScript中函数声明与函数表达式的区别详解
2016/08/18 Javascript
Vue.js表单控件实践
2016/10/27 Javascript
Angular2入门教程之模块和组件详解
2017/05/28 Javascript
Vue实现购物车场景下的应用
2017/11/27 Javascript
JavaScript面向对象继承原理与实现方法分析
2018/08/09 Javascript
微信小程序vant弹窗组件的实现方式
2020/02/21 Javascript
在Uni中使用Vue的EventBus总线机制操作
2020/07/31 Javascript
[00:37]食人魔魔法师轮盘吉兆顺应全新至宝将拥有额外款式
2019/12/19 DOTA
Python使用自带的ConfigParser模块读写ini配置文件
2016/06/26 Python
Python基于回溯法解决01背包问题实例
2017/12/06 Python
Python使用matplotlib简单绘图示例
2018/02/01 Python
Python+PIL实现支付宝AR红包
2018/02/09 Python
python logging日志模块以及多进程日志详解
2018/04/18 Python
python numpy格式化打印的实例
2018/05/14 Python
对python程序内存泄漏调试的记录
2018/06/11 Python
使用 Python 实现简单的 switch/case 语句的方法
2018/09/17 Python
python中读入二维csv格式的表格方法详解(以元组/列表形式表示)
2020/04/24 Python
python 发送邮件的示例代码(Python2/3都可以直接使用)
2020/12/03 Python
YOINS官网:时尚女装网上购物
2017/03/17 全球购物
Sunglasses Shop德国站:欧洲排名第一的太阳镜网站
2017/08/01 全球购物
采购员的工作职责
2013/12/26 职场文书
荷叶圆圆教学反思
2014/02/01 职场文书
2014年教师政治学习材料
2014/06/02 职场文书
服务承诺书
2015/01/19 职场文书
项目验收申请报告
2015/05/15 职场文书
遗失证明范文
2015/06/19 职场文书