網上關於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,所以都會放到等待隊列~~~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裏的第二個參數)執行便可線程