实例详解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 Timing
Apr 21 Javascript
加速IE的Javascript document输出的方法
Dec 02 Javascript
js Html结构转字符串形式显示代码
Nov 15 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
Apr 14 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
Sep 09 Javascript
Node.js中process模块常用的属性和方法
Dec 13 Javascript
通过源码分析Vue的双向数据绑定详解
Sep 24 Javascript
js时间戳与日期格式之间相互转换
Dec 11 Javascript
Javascript中从学习bind到实现bind的过程
Jan 05 Javascript
个人小程序接入支付解决方案
May 23 Javascript
Vue中函数防抖节流的理解及应用实现
Apr 24 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详细彻底学习Smarty
2008/03/27 PHP
PHP写的加密函数,支持私人密钥(详细介绍)
2013/06/09 PHP
用Json实现PHP与JavaScript间数据交换的方法详解
2013/06/20 PHP
解析php file_exists无效的解决办法
2013/06/26 PHP
排序算法之PHP版快速排序、冒泡排序
2014/04/09 PHP
php中的观察者模式简单实例
2015/01/20 PHP
PHP双向链表定义与用法示例
2018/01/31 PHP
How to Auto Include a Javascript File
2007/02/02 Javascript
javascript实现划词标记+划词搜索功能
2007/03/06 Javascript
js冒泡法和数组转换成字符串示例代码
2013/08/14 Javascript
Javascript对象属性方法汇总
2013/11/21 Javascript
JavaScript函数获取事件源的小例子
2014/05/14 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
2015/03/13 Javascript
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
2016/06/06 Javascript
angular 动态组件类型详解(四种组件类型)
2017/02/22 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
2017/05/11 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
2018/03/23 Javascript
微信小程序实现天气预报功能
2018/07/18 Javascript
ES6 Proxy实现Vue的变化检测问题
2019/06/11 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
2020/07/27 Javascript
Python中turtle作图示例
2017/11/15 Python
将字典转换为DataFrame并进行频次统计的方法
2018/04/08 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
Python爬虫开发与项目实战
2020/12/16 Python
墨尔本最受欢迎的复古风格品牌:Princess Highway
2018/12/21 全球购物
EJB实例的生命周期
2016/10/28 面试题
拓展培训心得体会
2014/01/04 职场文书
教育合作协议范本
2014/10/17 职场文书
工伤事故赔偿协议书
2014/10/27 职场文书
简历自我评价模板
2015/03/11 职场文书
拖欠货款起诉状
2015/05/20 职场文书
2015暑假社会调查报告
2015/07/13 职场文书
拔河比赛队名及霸气口号
2015/12/24 职场文书
职业生涯规划书之大学四年
2019/08/07 职场文书
「地球外少年少女」BD发售宣传CM公开
2022/03/21 日漫