浅谈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之解决IE下不渲染的bug
Jun 29 Javascript
html a标签-超链接中confirm方法使用介绍
Jan 04 Javascript
js内存泄露的几种情况详细探讨
May 31 Javascript
node.js学习总结之调式代码的方法
Jun 25 Javascript
举例讲解Node.js中的Writable对象
Jul 29 Javascript
jquery实现页面虚拟键盘特效
Aug 08 Javascript
深入理解AngularJs-scope的脏检查(一)
Jun 19 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
Aug 08 Javascript
详解node nvm进行node多版本管理
Oct 21 Javascript
vue-cli3搭建项目的详细步骤
Dec 05 Javascript
WEEX环境搭建与入门详解
Oct 16 Javascript
使用js原生实现年份轮播选择效果实例
Jan 12 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
php4的session功能评述(一)
2006/10/09 PHP
php Memcache 中实现消息队列
2009/11/24 PHP
PHP中CURL方法curl_setopt()函数的参数分享
2013/01/19 PHP
PHP 面向对象程序设计(oop)学习笔记(一) - 抽象类、对象接口、instanceof 和契约式编程
2014/06/12 PHP
Zend Framework分发器用法示例
2016/12/11 PHP
使Ext的Template可以解析二层的json数据的方法
2007/12/22 Javascript
JavaScript 实现模态对话框 源代码大全
2009/05/02 Javascript
JQuery小知识
2010/10/15 Javascript
基于jQuery的试卷自动排版系统实现代码
2011/01/06 Javascript
js中设置元素class的三种方法小结
2011/08/28 Javascript
js函数在frame中的相互调用详解
2014/03/03 Javascript
jquery+html5制作超酷的圆盘时钟表
2015/04/14 Javascript
解决jquery无法找到其他父级子集问题的方法
2016/05/10 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
2016/08/23 Javascript
详解使用JS如何制作简单的ASCII图与单极图
2017/03/31 Javascript
vue2.0使用swiper组件实现轮播的示例代码
2018/03/03 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
2018/11/21 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
2018/11/26 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
Vue学习之常用指令实例详解
2020/01/06 Javascript
js实现圆形显示鼠标单击位置
2020/02/11 Javascript
python从ftp下载数据保存实例
2013/11/20 Python
Python中Django框架下的staticfiles使用简介
2015/05/30 Python
关于Pycharm无法debug问题的总结
2019/01/19 Python
解决win7操作系统Python3.7.1安装后启动提示缺少.dll文件问题
2019/07/15 Python
python 操作mysql数据中fetchone()和fetchall()方式
2020/05/15 Python
python输入中文的实例方法
2020/09/14 Python
CSS实现鼠标滑过鼠标点击代码写法
2016/12/26 HTML / CSS
amazeui时间组件的实现示例
2020/08/18 HTML / CSS
食品安全汇报材料
2014/08/18 职场文书
三问三解心得体会
2014/09/05 职场文书
南京市纪委监察局整改方案
2014/09/16 职场文书
婚内分居协议书范文
2014/11/26 职场文书
教学质量月活动总结
2015/05/11 职场文书
大学生读书笔记范文
2015/07/01 职场文书
教你快速构建一个基于nginx的web集群项目
2021/11/27 Servers