JavaScript中从setTimeout与setInterval到AJAX异步


Posted in Javascript onFebruary 13, 2017

setTimeout与setInterval执行

首先我们看一下以下代码打印结果

console.log(1);
setTimeout(function() { console.log(2); },100)
setTimeout(function() { console.log(3); },50)
console.log(4);

打印结果是 1、4、3、2,你可能觉得理所应当,那我们再看下下面这个例子

console.log(1);
setTimeout(function() { console.log(2); },0)
console.log(3);

这次的结果又会是什么呢?

1、3、2,不是1、2、3。到这里你可能会有疑惑了,明明定时器设置的时间为0,而且浏览器解析js是按照从上到下执行的,应该是1、2、3才对啊?

到这里我们要提一下浏览器的线程问题。

与js相关的浏览器线程有三个(注意:js解析是单线程) - js代码执行线程( 主线程 ) - UI渲染线程 - 事件循环线程

其中js代码执行线程与UI渲染线程两者是互斥的,也就是说js代码执行线程运行的时候,UI渲染线程会停止工作,这样做也是为了防止js中的DOM操作会导致两线程冲突;而事件循环线程比较特殊,接下来会根据setTimerout的执行过程进行讲解其作用。

回到上面的第一道题目

console.log(1);
 setTimeout(function() { console.log(2); },100)
 setTimeout(function() { console.log(3); },50)
 console.log(4);

 执行过程:

js主线程运行,遇到console.log(1),直接运行,在控制台输出结果;

主线程继续运行,然后遇到第一个setTimeout,接着setTimeout中的回调函数会被放入到一个事件队列中(这里的事件队里可以想象成一个备忘录,里面记录的全是一些需要做而未做的事);

遇到第二个setTimeout,其中的回调函数依然被加入到事件队列中;

执行console.log(4),到这里主线程的任务全部执行完毕,除了setTimeout里面的回调函数;

这个时候,我们还未说明的事件循环线程开始工作,它会去循环遍历事件队列(也就是我们的备忘录),如果事件队列中有回调函数,它就会将事件队列中的回调函数重新交给主线程;

主线程收到回调函数,然后开始执行函数体。(这里要注意,因为两个setTimeout本身有执行时间,所以在这里的时候就会根据时间的长短按顺序执行啦。)

  setInterval原理与之相同,不作另说。

总的来说,setTimeout与setInterval的执行会等到主线程的所有任务全部执行后,才会再执行其中的回调函数,所以在使用它们的时候也要注意,特别是在主线程中有特别耗时的任务的时候,两种定时器会被不可预测的延后。

讲到这里,大家有没有想到什么呢?

恩,就是异步,setTimeout的执行有没有一点异步的感觉呢?但又因为它必须是等到主线程全部执行完才会执行,所以可以称之为伪异步。

说到异步,我们还会想到AJAX,都说AJAX是异步,但是它异步的原理想必还不清楚的你应该有点兴趣了解的。

异步:简单说就是在处理某一件事的时候还可以去做别的事,比如:你在银行取号后等待取钱,在等待的过程中你还可以玩手机,和别人聊天等等,这个过程就是异步的。

AJAX 异步的原理

发送一个AJAX请求的时候,浏览器会有一个专门的线程来进行该任务;

而在AJAX中也是有回调函数的,比如请求成功后的回调,失败后的回调,这些回调函数与setTimeout中的回调一样会被推入到事件队列中;

浏览器接会再次提供一个县城接收AJAX请求返回的数据;

事件循环线程这时候知道事件队列中AJAX的回调函数能够被执行了,遍历事件队列,将其中的回调函数交回给js主线程;

主线程执行AJAX回调函数内部代码。

总的说来,AJAX的请求不会干扰到主线程任务的执行,它有自己专供的线程来处理其任务,就像是浏览器的亲儿子~~~

以上所述是小编给大家介绍的JavaScript中从setTimeout与setInterval到AJAX异步,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
在多个页面使用同一个HTML片段的代码
Mar 04 Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
Jan 15 Javascript
将input file的选择的文件清空的两种解决方案
Oct 21 Javascript
javascript 获取iframe里页面中元素值的方法
Feb 17 Javascript
用js的document.write输出的广告无阻塞加载的方法
Jun 05 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
Mar 09 Javascript
jQuery解决$符号命名冲突
Jun 18 Javascript
纯JS前端实现分页代码
Jun 21 Javascript
JavaScript 数组的深度复制解析
Nov 02 Javascript
AngularJS中transclude用法详解
Nov 03 Javascript
JavaScript进制转换实现方法解析
Jan 18 Javascript
Vue的data、computed、watch源码浅谈
Apr 04 Javascript
Bootstrap选项卡学习笔记分享
Feb 13 #Javascript
jQuery Ajax全解析
Feb 13 #Javascript
jQuery中 bind的用法简单介绍
Feb 13 #Javascript
jquery实现轮播图效果
Feb 13 #Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
Feb 13 #Javascript
利用Javascript实现简单的转盘抽奖
Feb 13 #Javascript
简单实现js倒计时功能
Feb 13 #Javascript
You might like
ajax缓存问题解决途径
2006/12/06 PHP
简单的移动设备检测PHP脚本代码
2011/02/19 PHP
SESSION信息保存在哪个文件目录下以及能够用来保存什么类型的数据
2012/06/17 PHP
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
2016/05/06 PHP
Laravel关联模型中过滤结果为空的结果集(has和with区别)
2018/10/18 PHP
PHP实现微信提现(企业付款到零钱)
2019/08/01 PHP
javascript基础的动画教程,直观易懂
2007/01/10 Javascript
javascript XML数据显示为HTML一例
2008/12/23 Javascript
jquery实现点击消失的代码
2014/03/03 Javascript
使用node.js 制作网站前台后台
2014/11/13 Javascript
浅谈jQuery.easyui的datebox格式化时间
2015/06/25 Javascript
javascript单页面手势滑屏切换原理详解
2016/03/21 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
微信小程序实现登录页云层漂浮的动画效果
2017/05/05 Javascript
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
JS实现提交表单前的数字及邮箱校检功能
2017/11/13 Javascript
使用react实现手机号的数据同步显示功能的示例代码
2018/04/03 Javascript
JS求Number类型数组中最大元素方法
2018/04/08 Javascript
vue的for循环使用方法
2019/02/12 Javascript
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
[01:05]DOTA2完美大师赛趣味视频之选手教你打职业
2017/11/23 DOTA
[12:21]VICI vs TNC (BO3)
2018/06/07 DOTA
一个Python最简单的接口自动化框架
2018/01/02 Python
Python自定义一个类实现字典dict功能的方法
2019/01/19 Python
Python字符串的常见操作实例小结
2019/04/08 Python
Python基于paramunittest模块实现excl参数化
2020/04/26 Python
HTML5中drawImage用法分析
2014/12/01 HTML / CSS
工程造价专业大学生职业规划范文
2014/03/09 职场文书
法律专业自荐信
2014/06/03 职场文书
党员批评与自我批评
2014/10/15 职场文书
小学运动会宣传稿
2015/07/23 职场文书
领导离职感言
2015/08/03 职场文书
导游词书写之黄山
2019/08/06 职场文书
Redis 的查询很快的原因解析及Redis 如何保证查询的高效
2022/03/16 Redis