欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-26 08:29:29
前言 settimeout,前端工程师必定会打交道的一个函数。它看上去非常的简单,朴实,有着一个很不平凡的名字--定时器。其实网上关于javascript中settime...

前言

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

总结

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