时间:2021-05-18
前言
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里的第二个参数(延迟时间)决定的,例如
那么主程序执行完成以后的1000ms后就会执行这段代码,如果延迟时间为2000,那么主程序执行完成后2000ms就会执行这段代码,只需记住一点:延迟时间始终是相对主程序执行完毕的那个时间算的 ,并且多个setTimeout的先后顺序也是由这个延迟时间决定的,如果遇到某个setTimeout需要花费大量的时间怎么办?可以参照上图里执行结果的数字2和数字5对应的时间,由于js是单线程,所以当执行到这个setTimeout后,会将这个程序执行完成后再去执行下一个setTimeout,无论下一个setTimeout的延迟时间为多少,如果这两个setTimeout时间的差值小于第一个setTimeout消耗的时间,程序会等待这个setTimeout执行完成后立即执行下一个setTimeout,如果差值大于消耗的时间,就按照和主程序约定的延迟(setTimeout里的第二个参数)执行即可
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对的支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了JavaScript实现向setTimeout执行代码传递参数的方法。分享给大家供大家参考。具体分析如下:setTimeout函数是javascr
本文介绍了详解promise.then,process.nextTick,setTimeout以及setImmediate的执行顺序,分享给大家,具体如下:先举
Javascript中会经常用到setTimeout来推迟一个函数的执行,如:复制代码代码如下:setTimeout(function(){alert("Hel
本文实例分析了JavaScript计时器用法。分享给大家供大家参考,具体如下:JavaScript中使用setTimeout和clearTimeout函数进行计
COM组件中调用JavaScript函数详解及实例要求是很简单的,即有COM组件A在IE中运行,使用JavaScript(JS)调用A的方法longCalc()