实例详解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 相关文章推荐
javascript实现的动态文字变换
Jul 28 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
May 29 Javascript
js由下向上不断上升冒气泡效果实例
May 07 Javascript
javascript中$(function() {});写与不写有哪些区别
Aug 10 Javascript
javascript瀑布流布局实现方法详解
Feb 17 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
Jun 13 Javascript
jquery拖动改变div大小
Jul 04 jQuery
JS一个简单的注册页面实例
Sep 05 Javascript
Vue组件和Route的生命周期实例详解
Feb 10 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
Oct 20 Javascript
vue-cli3.X快速创建项目的方法步骤
Nov 14 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
Jul 18 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
星际初学者游戏中永远要做的事
2020/03/04 星际争霸
使用php将某个目录下面的所有文件罗列出来的方法详解
2013/06/21 PHP
Yii Framework框架获取分类下面的所有子类方法
2014/06/20 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
PHP封装的数据库保存session功能类
2016/07/11 PHP
js中将多个语句写成一个语句的两种方法小结
2007/12/08 Javascript
JavaScript 继承详解(四)
2009/07/13 Javascript
JavaScript 三种不同位置代码的写法
2009/10/25 Javascript
IE浏览器打印的页眉页脚设置解决方法
2009/12/08 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
js将字符串转成正则表达式的实现方法
2013/11/13 Javascript
JS创建自定义表格具体实现
2014/02/11 Javascript
让JavaScript和其它资源并发下载的方法
2014/10/16 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
2016/02/17 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
2017/02/09 Javascript
详解如何在Angular中快速定位DOM元素
2017/05/17 Javascript
jQuery 改变P标签文本值方法
2018/02/24 jQuery
element-ui中Table表格省市区合并单元格的方法实现
2019/08/07 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
2019/11/01 Javascript
Python将阿拉伯数字转换为罗马数字的方法
2015/07/10 Python
python中 chr unichr ord函数的实例详解
2017/08/06 Python
Python 判断 有向图 是否有环的实例讲解
2018/02/01 Python
python实现类之间的方法互相调用
2018/04/29 Python
基于python3实现socket文件传输和校验
2018/07/28 Python
pandas修改DataFrame列名的实现方法
2019/02/22 Python
python单向循环链表原理与实现方法示例
2019/12/03 Python
基于pytorch的lstm参数使用详解
2020/01/14 Python
解决ROC曲线画出来只有一个点的问题
2020/02/28 Python
Python实现图片查找轮廓、多边形拟合、最小外接矩形代码
2020/07/14 Python
Python 利用flask搭建一个共享服务器的步骤
2020/12/05 Python
python空元组在all中返回结果详解
2020/12/15 Python
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
留学推荐信怎么写
2015/03/26 职场文书
Log4j.properties配置及其使用
2021/08/02 Java/Android
zabbix 代理服务器的部署与 zabbix-snmp 监控问题
2022/07/15 Servers
centos环境下nginx高可用集群的搭建指南
2022/07/23 Servers