实例详解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 相关文章推荐
层序遍历在ExtJs的TreePanel中的应用
Oct 16 Javascript
关于js遍历表格的实例
Jul 10 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
Mar 26 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
Sep 03 Javascript
JavaScript对象学习小结
Sep 02 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
Sep 24 Javascript
BootStrap modal实现拖拽功能
Dec 01 Javascript
ES6数组与对象的解构赋值详解
Jun 14 Javascript
js设计模式之代理模式及订阅发布模式实例详解
Aug 15 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
May 13 Javascript
react国际化react-intl的使用
May 06 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
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装(win+linux)
2012/05/05 PHP
PHP使用pear实现mail发送功能 windows环境下配置pear
2016/04/15 PHP
PHP对象、模式与实践之高级特性分析
2016/12/08 PHP
基于Jquery的表格隔行换色,移动换色,点击换色插件
2010/12/22 Javascript
jquery改变disabled的boolean状态的三种方法
2013/12/13 Javascript
jQuery入门基础知识学习指南
2015/08/14 Javascript
javascript中SetInterval与setTimeout的定时器用法
2015/08/24 Javascript
基于JavaScript实现回到页面顶部动画代码
2016/05/24 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
2016/09/20 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
jQuery插件form-validation-engine正则表达式操作示例
2017/02/09 Javascript
javascript深拷贝和浅拷贝详解
2017/02/14 Javascript
bootstrap table表格使用方法详解
2017/04/26 Javascript
JS脚本加载后执行相应回调函数的操作方法
2018/02/28 Javascript
vue和webpack安装命令详解
2018/06/15 Javascript
Nuxt配合Node在实际生产中的应用详解
2018/08/07 Javascript
js中apply()和call()的区别与用法实例分析
2018/08/14 Javascript
Python Web开发模板引擎优缺点总结
2014/05/06 Python
python中urllib模块用法实例详解
2014/11/19 Python
python中的迭代和可迭代对象代码示例
2017/12/27 Python
python制作图片缩略图
2019/04/30 Python
python实现布隆过滤器及原理解析
2019/12/08 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
印度网上药店:1mg
2017/10/13 全球购物
瑞士最大的图书贸易公司:Orell Füssli
2019/12/28 全球购物
《九色鹿》教学反思
2014/02/27 职场文书
家长会主持词
2014/03/26 职场文书
无私奉献演讲稿
2014/09/04 职场文书
2014年党员自我评议(5篇)
2014/09/12 职场文书
2014年营销工作总结
2014/11/22 职场文书
病假条格式范文
2015/08/17 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书
Java9新特性对HTTP2协议支持与非阻塞HTTP API
2022/03/16 Java/Android
Python+Pillow+Pytesseract实现验证码识别
2022/05/11 Python
如何解决flex文本溢出问题小结
2022/07/15 HTML / CSS