實例詳解JavaScript中setTimeout函數(shù)的執(zhí)行順序
前言
setTimeout,前端工程師必定會打交道的一個函數(shù)。它看上去非常的簡單,樸實,有著一個很不平凡的名字--定時器。其實網(wǎng)上關(guān)于JavaScript中setTimeout的文章很多,但總感覺例子不夠直接具體,因此寫了個簡單的例子并加以解釋希望能讓大家明白setTimeout是如何執(zhí)行的。下面話不多說了,來一起看看詳細的介紹:
實例代碼如下:
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ù),當程序執(zhí)行完console.log(1,time1)
后;遇到setTimeout會將該函數(shù)放入等待隊列,等待當前主程序執(zhí)行完畢后開始執(zhí)行setTimeout,由于后面的幾個都是setTimeout,因此都會放到等待隊列~~~
那么這些隊列里的函數(shù)誰先執(zhí)行呢?就是根據(jù)setTimeout里的第二個參數(shù)(延遲時間)決定的,例如
setTimeout(function(){ var time3=new Date().getTime(); console.log(3,time3); },1000);
那么主程序執(zhí)行完成以后的1000ms后就會執(zhí)行這段代碼,如果延遲時間為2000,那么主程序執(zhí)行完成后2000ms就會執(zhí)行這段代碼,只需記住一點:延遲時間始終是相對主程序執(zhí)行完畢的那個時間算的 ,并且多個setTimeout的先后順序也是由這個延遲時間決定的,如果遇到某個setTimeout需要花費大量的時間怎么辦?可以參照上圖里執(zhí)行結(jié)果的數(shù)字2和數(shù)字5對應的時間,由于js是單線程,所以當執(zhí)行到這個setTimeout后,會將這個程序執(zhí)行完成后再去執(zhí)行下一個setTimeout,無論下一個setTimeout的延遲時間為多少,如果這兩個setTimeout時間的差值小于第一個setTimeout消耗的時間,程序會等待這個setTimeout執(zhí)行完成后立即執(zhí)行下一個setTimeout,如果差值大于消耗的時間,就按照和主程序約定的延遲(setTimeout里的第二個參數(shù))執(zhí)行即可
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
js中Math之random,round,ceil,floor的用法總結(jié)
本篇文章是對js中Math之random,round,ceil,floor的用法進行了總結(jié)介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12textarea不能通過maxlength屬性來限制字數(shù)的解決方法
textarea稱文本域,又稱文本區(qū),其不能通過maxlength屬性來限制字數(shù),為此必須尋求其他方法來加以限制以達到預設(shè)的需求2014-09-09使用threejs實現(xiàn)第一人稱視角的移動的問題(示例代碼)
第一人稱視角的場景巡檢主要需要解決兩個問題,人物在場景中的移動和碰撞檢測。移動與碰撞功能是所有三維場景首先需要解決的基本問題,今天我們就通過最基本的threejs來完成第一人稱視角的場景巡檢功能,感興趣的朋友一起看看吧2022-02-02