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

代码十分简单,想必你们都能看懂,执行结果以下:函数

clipboard.png

解释:setTimeout属于异步执行函数,当程序执行完console.log(1,time1)后;遇到setTimeout会将该函数放入等待队列,等待当前主程序执行完毕后开始执行setTimeout,因为后面的几个都是setTimeout,所以都会放到等待队列~~~spa

那么这些队列里的函数谁先执行呢?就是根据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里的第二个参数)执行便可线程

相关文章
相关标签/搜索