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复选框和单选框 checkbox和radio事件介绍
Dec 12 Javascript
DWR实现模拟Google搜索效果实现原理及代码
Jan 30 Javascript
Javascript动态引用CSS文件的2种方法介绍
Jun 06 Javascript
jquery列表拖动排列(由项目提取相当好用)
Jun 17 Javascript
js通过classname来获取元素的方法
Nov 24 Javascript
web打印小结
Jan 11 Javascript
微信小程序 setData使用方法及常用错误解决办法
May 11 Javascript
AngularJS实现表格的增删改查(仅限前端)
Jul 04 Javascript
es6在react中的应用代码解析
Nov 08 Javascript
微信小程序textarea层级过高的解决方法
Mar 04 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
Sep 23 Javascript
关于JavaScript数组去重的一些理解汇总
Sep 10 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
PHP递归调用的小技巧讲解
2013/02/19 PHP
PHP直接修改表内容DataGrid功能实现代码
2015/09/24 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
PHP实现的折半查询算法示例
2017/10/09 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
15 个 JavaScript Web UI 库
2010/05/19 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
2011/10/12 Javascript
ExtJS DOM元素操作经验分享
2013/08/28 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
单击和双击事件的冲突处理示例代码
2014/04/03 Javascript
Javascript 函数parseInt()转换时出现bug问题
2014/05/20 Javascript
javascript 常见功能汇总
2015/06/11 Javascript
关于JS中prototype的理解
2015/09/07 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
2016/02/25 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
2016/04/17 Javascript
JS 清除字符串数组中,重复元素的实现方法
2016/05/24 Javascript
angularJS深拷贝详解
2017/03/23 Javascript
Redux 和 Mobx的选择问题:让你不再困惑!
2017/09/18 Javascript
详解js中let与var声明变量的区别
2020/04/05 Javascript
Python实现的一个简单LRU cache
2014/09/26 Python
python 判断是否为正小数和正整数的实例
2017/07/23 Python
python 解压pkl文件的方法
2018/10/25 Python
python输入整条数据分割存入数组的方法
2018/11/13 Python
python爬虫获取新浪新闻教学
2018/12/23 Python
如何通过python检查文件是否被占用
2020/12/18 Python
英国足球店:UK Soccer Shop
2017/11/19 全球购物
几个MySql的面试题
2013/04/22 面试题
集体婚礼证婚词
2014/01/13 职场文书
yy婚礼司仪主持词
2014/03/14 职场文书
大学生就业自我推荐信
2014/05/10 职场文书
班级读书活动总结
2014/06/30 职场文书
幼儿教师暑期培训方案
2014/08/27 职场文书
护士长2014年终工作总结
2014/11/11 职场文书
2021年国漫热度排行前十,完美世界上榜,第四是美国动画作品
2022/03/18 国漫
全新239军机修复记
2022/04/05 无线电