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裏的第二個參數)執行便可線程

相關文章
相關標籤/搜索