实例详解JavaScript中setTimeout函数的执行顺序


Posted in Javascript onJuly 12, 2017

前言

setTimeout,前端工程师必定会打交道的一个函数。它看上去非常的简单,朴实,有着一个很不平凡的名字--定时器。其实网上关于JavaScript中setTimeout的文章很多,但总感觉例子不够直接具体,因此写了个简单的例子并加以解释希望能让大家明白setTimeout是如何执行的。下面话不多说了,来一起看看详细的介绍:

实例代码如下:

var time1=new Date().getTime();
 console.log(1,time1);
 setTimeout(function(){
 var time4=new Date().getTime();
 console.log(4,time4);
 for(var a=0;a<10000000000;a++){
  a=a+1;
 }
 var time2=new Date().getTime();
 console.log(2,time2);
 },2000);

 setTimeout(function(){
 var time3=new Date().getTime();
 console.log(3,time3);
 },1000);
 setTimeout(function(){
 var time5=new Date().getTime();
 console.log(5,time5);
 },3000);
 setTimeout(function(){
 var time6=new Date().getTime();
 console.log(6,time6);
 },14000);

代码十分简单,想必大家都能看懂,执行结果如下:

实例详解JavaScript中setTimeout函数的执行顺序

解释:setTimeout属于异步执行函数,当程序执行完console.log(1,time1)后;遇到setTimeout会将该函数放入等待队列,等待当前主程序执行完毕后开始执行setTimeout,由于后面的几个都是setTimeout,因此都会放到等待队列~~~

那么这些队列里的函数谁先执行呢?就是根据setTimeout里的第二个参数(延迟时间)决定的,例如            

setTimeout(function(){
 var time3=new Date().getTime();
 console.log(3,time3);
 },1000);

那么主程序执行完成以后的1000ms后就会执行这段代码,如果延迟时间为2000,那么主程序执行完成后2000ms就会执行这段代码,只需记住一点:延迟时间始终是相对主程序执行完毕的那个时间算的 ,并且多个setTimeout的先后顺序也是由这个延迟时间决定的,如果遇到某个setTimeout需要花费大量的时间怎么办?可以参照上图里执行结果的数字2和数字5对应的时间,由于js是单线程,所以当执行到这个setTimeout后,会将这个程序执行完成后再去执行下一个setTimeout,无论下一个setTimeout的延迟时间为多少,如果这两个setTimeout时间的差值小于第一个setTimeout消耗的时间,程序会等待这个setTimeout执行完成后立即执行下一个setTimeout,如果差值大于消耗的时间,就按照和主程序约定的延迟(setTimeout里的第二个参数)执行即可

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JS BASE64编码 window.atob(), window.btoa()
Mar 09 Javascript
Javascript 中的 &amp;&amp; 和 || 使用小结
Apr 25 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
Jun 24 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
Mar 02 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
May 08 Javascript
jquery仿QQ登录账号选择下拉框效果
Mar 22 Javascript
基于Angular.js实现的触摸滑动动画实例代码
Feb 19 Javascript
Vue.js实例方法之生命周期详解
Jul 03 Javascript
Vue的Flux框架之Vuex状态管理器
Jul 30 Javascript
vue的全局提示框组件实例代码
Feb 26 Javascript
微信小程序实现消息框弹出动画
Apr 18 Javascript
Vue实现剪切板图片压缩功能
Feb 04 Javascript
详解Node项目部署到云服务器上
Jul 12 #Javascript
angular.js中解决跨域问题的三种方式
Jul 12 #Javascript
JavaScript+HTML5实现的日期比较功能示例
Jul 12 #Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
Jul 12 #Javascript
Bootstrap提示框效果的实例代码
Jul 12 #Javascript
JavaScript输出所选择起始与结束日期的方法
Jul 12 #Javascript
微信小程序三级联动地址选择器的实例代码
Jul 12 #Javascript
You might like
一个简单的自动发送邮件系统(三)
2006/10/09 PHP
PHP实现根据浏览器跳转不同语言页面代码
2013/08/02 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
php版微信公众平台开发之验证步骤实例详解
2016/09/23 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
cssQuery()的下载与使用方法
2007/01/12 Javascript
javascript 自动转到命名锚记
2009/01/10 Javascript
JavaScript获取GridView中用户点击控件的行号,列号
2009/04/14 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
2013/12/02 Javascript
javascript中String对象的slice()方法分析
2014/12/20 Javascript
JavaScript对象学习小结
2015/09/02 Javascript
Node.js DES加密的简单实现
2016/07/07 Javascript
chrome浏览器如何断点调试异步加载的JS
2016/09/05 Javascript
bootstrap按钮插件(Button)使用方法解析
2017/01/13 Javascript
实例教学如何写vue插件
2017/11/30 Javascript
vue和小程序项目中使用iconfont的方法
2020/05/19 Javascript
react antd表格中渲染一张或多张图片的实例
2020/10/28 Javascript
深入理解Python中变量赋值的问题
2017/01/12 Python
python3利用smtplib通过qq邮箱发送邮件方法示例
2017/12/03 Python
python实现远程通过网络邮件控制计算机重启或关机
2018/02/22 Python
python 时间信息“2018-02-04 18:23:35“ 解析成字典形式的结果代码详解
2018/04/19 Python
对python中的argv和argc使用详解
2018/12/15 Python
python 绘制拟合曲线并加指定点标识的实现
2019/07/10 Python
Python+OpenCv制作证件图片生成器的操作方法
2019/08/21 Python
浅析Python的命名空间与作用域
2020/11/25 Python
Staples美国官方网站:办公用品一站式采购
2016/07/28 全球购物
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
一个J2EE项目团队的主要人员组成是什么
2012/06/04 面试题
地理科学专业毕业生求职信
2013/10/15 职场文书
办公室主任主任岗位责任制
2014/02/11 职场文书
职员竞岗演讲稿
2014/05/14 职场文书
党员评议思想汇报
2014/10/08 职场文书
群众路线自查自纠工作情况报告
2014/10/28 职场文书
辞职信范文大全
2015/03/02 职场文书
行政处罚告知书
2015/07/01 职场文书
Nginx配置并兼容HTTP实现代码解析
2021/03/31 Servers