实例详解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里的第二个参数）执行即可

总结

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

# settimeout执行顺序 # settimeout # 执行函数 # js # 函数 # JS ES6中setTimeout函数的执行上下文示例 # JS中SetTimeout和SetInterval使用初探 # js中setTimeout的妙用--防止循环超时 # JavaScript中从setTimeout与setInterval到AJAX异步 # JS中setTimeout和setInterval的最大延时值详解 # JavaScript计时器用法分析【setTimeout和clearTimeout】 # 详解JS中定时器setInterval和setTImeout的this指向问题 # JavaScript setTimeout与setTimeinterval使用案例详解 # 主程序 # 就会 # 这段 # 第二个 # 时间为 # 延迟时间 # 完成后 # 都是 # 几个 # 第一个 # 大家都 # 多个 # 说了 # 是由 # 不多 # 只需 # 这两个 # 能让 # 写了 # 再去

返回目录在线咨询

上一篇：php empty()函数的用法
下一篇：IPv6建站配置教程：一站式指南与常见问题解析

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求