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

更新时间：2016年10月07日 12:01:42 投稿：jingxian

下面小编就为大家带来一篇浅谈js的ajax的异步和同步请求的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

先来看以下代码：

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

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

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

我们在看一段代码：

var flag=true;
$.ajax({
  url: "https://www.jb51.net/",
  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://www.jb51.net/",
  async:false,
  success: function(data){
    flag=false;
  }  
});
while(flag){
  index++;
}
alert(index);

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

以上就是小编为大家带来的浅谈js的ajax的异步和同步请求的问题全部内容了，希望大家多多支持脚本之家~

您可能感兴趣的文章:

js实现增加数字显示的环形进度条效果
本文主要分享了js实现增加数字显示的环形进度条效果的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧
2017-02-02
10分钟彻底搞懂微信小程序单页面应用路由
这篇文章主要给大家介绍了光宇微信小程序单页面应用路由的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-03-03
JavaScript给数组添加元素的6个方法
本文主要介绍了JavaScript给数组添加元素的6个方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
javascript关于open.window子页面执行完成后刷新父页面的问题分析
这篇文章主要介绍了javascript关于open.window子页面执行完成后刷新父页面的问题,实例分析了javascript操作子页面的执行与父页面的刷新技巧,非常具有实用价值,需要的朋友可以参考下
2015-04-04
Echarts图表位置调整的图文教程
实际过程中你会发现图表在div中的位置不太理想,这时怎么去调整呢?下面这篇文章主要给大家介绍了关于Echarts图表位置调整的相关资料,需要的朋友可以参考下
2022-10-10
javascript实现网页字符定位的方法
这篇文章主要介绍了javascript实现网页字符定位的方法,实例分析了javascript页面元素查找与定位的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-07-07
JavaScript实现获取img的原始尺寸的方法详解
在微信小程序开发时，它的image标签有一个默认高度，这样你的图片很可能出现被压缩变形的情况，所以就需要获取到图片的原始尺寸对image的宽高设置，本文就来分享一下JavaScript实现获取img的原始尺寸的方法吧
2023-03-03
JavaScript代码里的判断小结
在JavaScript代码中，多多少少会有判断语句。业务越复杂，逻辑就越复杂，判断就越多。今天给大家整理下JavaScript中代码里常会用到的那些判断，有需要的可以参考借鉴。
2016-08-08
微信小程序多文件上传 Tdesign及导入失败问题
小程序文件上传还是有点麻烦的,其实主要还是小程序对的接口有诸多的不便,比如说,文件不能批量提交,只能一个个的提交,小程序的上传需要专门的接口,这篇文章主要介绍了微信小程序多文件上传 Tdesign及导入失败问题,需要的朋友可以参考下
2023-11-11
JavaScript实现经典排序算法之冒泡排序
这篇文章主要介绍了JavaScript实现经典排序算法之冒泡排序，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12