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

前言与概述

前言

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

主程序执行完毕后1000毫秒，对应的代码将被执行；若延迟时间设为2000毫秒，则主程序结束后2000毫秒执行。核心要点是：延迟时间始终相对于主程序执行完毕的时刻计算，且多个setTimeout的执行顺序取决于该延迟时间。若某个setTimeout回调执行耗时极长（如参考图中数字2和5对应的时间点），由于JavaScript是单线程模型，程序会先执行完当前回调，再处理下一个。若下一个setTimeout的延迟时间差值小于前一个回调的消耗时间，则前一个回调结束后立即执行下一个；若差值大于消耗时间，则按照与主程序约定的延迟时间执行。

总结

总结

以上内容为本文的全部讲解，希望能为读者的学习或工作提供有益参考。如有任何疑问，欢迎留言交流，感谢支持。