前言

setTimeout，前端工程師必定會(huì)打交道的一個(gè)函數(shù)。它看上去非常的簡單，樸實(shí)，有著一個(gè)很不平凡的名字--定時(shí)器。其實(shí)網(wǎng)上關(guān)于JavaScript中setTimeout的文章很多，但總感覺例子不夠直接具體，因此寫了個(gè)簡單的例子并加以解釋希望能讓大家明白setTimeout是如何執(zhí)行的。下面話不多說了，來一起看看詳細(xì)的介紹：

實(shí)例代碼如下：

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

代碼十分簡單，想必大家都能看懂，執(zhí)行結(jié)果如下：

解釋：setTimeout屬于異步執(zhí)行函數(shù)，當(dāng)程序執(zhí)行完console.log(1,time1)后;遇到setTimeout會(huì)將該函數(shù)放入等待隊(duì)列，等待當(dāng)前主程序執(zhí)行完畢后開始執(zhí)行setTimeout,由于后面的幾個(gè)都是setTimeout,因此都會(huì)放到等待隊(duì)列~~~

那么這些隊(duì)列里的函數(shù)誰先執(zhí)行呢？就是根據(jù)setTimeout里的第二個(gè)參數(shù)（延遲時(shí)間）決定的，例如            

 setTimeout(function(){
 var time3=new Date().getTime();
 console.log(3,time3);
 },1000);

那么主程序執(zhí)行完成以后的1000ms后就會(huì)執(zhí)行這段代碼，如果延遲時(shí)間為2000,那么主程序執(zhí)行完成后2000ms就會(huì)執(zhí)行這段代碼，只需記住一點(diǎn)：延遲時(shí)間始終是相對主程序執(zhí)行完畢的那個(gè)時(shí)間算的 ,并且多個(gè)setTimeout的先后順序也是由這個(gè)延遲時(shí)間決定的，如果遇到某個(gè)setTimeout需要花費(fèi)大量的時(shí)間怎么辦？可以參照上圖里執(zhí)行結(jié)果的數(shù)字2和數(shù)字5對應(yīng)的時(shí)間，由于js是單線程，所以當(dāng)執(zhí)行到這個(gè)setTimeout后，會(huì)將這個(gè)程序執(zhí)行完成后再去執(zhí)行下一個(gè)setTimeout,無論下一個(gè)setTimeout的延遲時(shí)間為多少，如果這兩個(gè)setTimeout時(shí)間的差值小于第一個(gè)setTimeout消耗的時(shí)間，程序會(huì)等待這個(gè)setTimeout執(zhí)行完成后立即執(zhí)行下一個(gè)setTimeout,如果差值大于消耗的時(shí)間，就按照和主程序約定的延遲（setTimeout里的第二個(gè)參數(shù)）執(zhí)行即可

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

最新評論