当前位置:首页 > 日记 > 正文

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

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

前言

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);

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

解释: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里的第二个参数)执行即可

总结

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

相关文章

详解tween.js的使用教程

详解tween.js的使用教程

使用教程,详解,电脑软件,js,tween,前面的话TweenJS提供了一个简单但强大的渐变界面。它支持渐变的数字对象属性&CSS样式属性,并允许链接补间动画和行动结合起来,创造出复杂的序列。本文将详细介绍tween.js的使用 概述tween.js允许以平滑的方…

老生常谈js-react组件生命周期

老生常谈js-react组件生命周期

生命周期,组件,老生常谈,电脑软件,react,组件的生命周期可分成三个状态:?Mounting:已插入真实 DOM?Updating:正在被重新渲染?Unmounting:已移出真实 DOM生命周期的方法有:?componentWillMount 在渲染前调用,在客户端也在服务端。?componentDidMo…

老生常谈js中0到底是 true 还是 fa

老生常谈js中0到底是 true 还是 fa

老生常谈,电脑软件,true,js,false,想到一个好玩的,运行如下 javascript :if ('0') alert("'0' is true");if ('0' == false) alert("'0' is false");结果是,两次都 alert 了!那么 '0' 到底是 true 还是 false 呢?答案是:在js做比较…

Excel表格函数出错怎么解决

Excel表格函数出错怎么解决

函数,表格,电脑软件,Excel,  工作中经常使用Excel的朋友可能都会遇到一些看起来似懂非懂的错误值信息:例如# N/A!、#VALUE!、#DIV/O!等等,出现这些错误的原因有很多种,你真的了解它们吗,熟练掌握解决这些错误的方法吗?下面给大家分享Excel中…

ps怎么给图形上渐变色

ps怎么给图形上渐变色

图形,渐变色,方法,电脑软件,ps,  给图形上色在ps中很简单,但其实上渐变色也很好看。那么大家知道ps怎么给图形上渐变色吗?下面是小编整理的ps怎么给图形上渐变色的方法,希望能帮到大家!ps给图形上渐变色的方法1、新建一个图层,画一个圆形。2…

解决浏览器记住ajax请求并能前进和

解决浏览器记住ajax请求并能前进和

请求,浏览器,并能,电脑软件,ajax,在我们浏览不同网页的时候,我们可以通过浏览器的前进、后退键来去到我们前后访问过的页面。这都有一个共同点,就是 浏览器地址栏的地址改变了。浏览器自身维护了一个记录用户访问页面历史的栈,栈中记录了用户…

WPS演示插入背景音乐的方法是什么

WPS演示插入背景音乐的方法是什么

方法,背景音乐,演示,电脑软件,WPS,  制作PPT的时候,需要加入一些元素使得PPT更加吸引人,其中给PPT加入背景音乐是常用的方法之一。那么在wps中,这个方法应该怎么使用,一起来探讨一下。以下是小编为您带来的关于WPS演示插入背景音乐的方法,希望…

JavaScript定义函数的三种实现方法

JavaScript定义函数的三种实现方法

方法,函数,三种,定义,电脑软件,JavaScript定义函数的三种实现方法【1】正常方法function print(msg){ document.write(msg);}对函数进行调用的几种方式: 函数名(传递给函数的参数1,传递给函数的参数2,….)变量 = 函数名(传递给函数的参数1,传递给…

详解JS中的立即执行函数

详解JS中的立即执行函数

立即执行函数,详解,电脑软件,JS,1.匿名函数不能单独定义,必须进行赋值操作或者立即执行,否则会被JS引擎定义为语法错误function(){alert(dada);}VM229:1 Uncaught SyntaxError: Unexpected token 2.在函数体后面加括号就能立即调用,这个函数形…

JS倒计时实例_天时分秒

JS倒计时实例_天时分秒

分秒,天时,倒计时,实例,电脑软件,HTML代码:<div id="times_wrap" class="time_num"> 距离结束时间: <div class="time_w"> <b id="times_d" class="time"> </b>天 <b id="times_h" class="time"> </b>时 <b id="times_m" …

Word中进行设置半透明的操作方法

Word中进行设置半透明的操作方法

设置,半透明,操作方法,操作步骤,电脑软件,  在我们使用word的时候经常会往里面插入一些图片,在word中,我们还可以将图片的背景颜色更改为半透明色,还可以做些其他的改动。今天,小编就教大家在Word中进行设置半透明的操作方法。Word中进行设置…

photoshop cs6怎么替换颜色 photos

photoshop cs6怎么替换颜色 photos

替换,教程,颜色,植物,电脑软件,如果发现自己的照片颜色不理想,想要替换颜色怎么办?其实我们可以使用ps任意替换颜色。那么,如何使用photoshop cs6替换颜色呢?下面小编就给大家介绍photoshop cs6给植物图片替换颜色的方法,一起去看看吧!方法/步骤:1…