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 相关文章推荐
Safari5中alert的无限循环BUG
Apr 07 Javascript
JavaScript中setInterval的用法总结
Nov 20 Javascript
node.js中的http.response.end方法使用说明
Dec 14 Javascript
jquery实现键盘左右翻页特效
Apr 30 Javascript
jQuery on()方法示例及jquery on()方法的优点
Aug 27 Javascript
分享12个实用的jQuery代码片段
Mar 09 Javascript
解析js如何获取css样式
Dec 11 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
Jun 05 Javascript
AngularJS中下拉框的高级用法示例
Oct 11 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
Sep 29 Javascript
使用Typescript和ES模块发布Node模块的方法
May 25 Javascript
layui实现显示数据表格、搜索和修改功能示例
Jun 03 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
array_multisort实现PHP多维数组排序示例讲解
2011/01/04 PHP
PHP实现QQ登录实例代码
2016/01/14 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
php设计模式之适配器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
wordpress之js库集合研究介绍
2007/08/17 Javascript
jquery ui resizable bug解决方法
2010/10/26 Javascript
JS原型对象通俗"唱法"
2012/12/27 Javascript
JS实现图片产生波纹一样flash效果的方法
2015/02/27 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
2015/03/13 Javascript
jQuery替换textarea中换行的方法
2015/06/10 Javascript
JavaScript获得url查询参数的方法
2015/07/02 Javascript
多种jQuery绑定事件的实现方式
2016/06/13 Javascript
javascript数字验证的实例代码(推荐)
2016/08/20 Javascript
jQuery实现的瀑布流加载效果示例
2016/09/13 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
Vue父子组件之间的通信实例详解
2018/09/28 Javascript
OpenLayers3实现对地图的基本操作
2020/09/28 Javascript
如何管理Vue中的缓存页面
2021/02/06 Vue.js
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
Python进程间通信Queue实例解析
2018/01/25 Python
pandas DataFrame数据转为list的方法
2018/04/11 Python
Python os.rename() 重命名目录和文件的示例
2018/10/25 Python
python利用插值法对折线进行平滑曲线处理
2018/12/25 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
Python函数的迭代器与生成器的示例代码
2020/06/18 Python
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
2018/12/04 HTML / CSS
浅谈amaze-ui中datepicker和datetimepicker注意的几点
2020/08/21 HTML / CSS
美国半成品食材配送服务商:Home Chef
2018/01/25 全球购物
五四青年节演讲稿
2014/05/26 职场文书
全陪导游词开场白
2015/05/29 职场文书
花田少年史观后感
2015/06/16 职场文书
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB
Prometheus 监控MySQL使用grafana展示
2021/08/30 MySQL