前言

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里的第二個參數）執行即可

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。