實(shí)例詳解JavaScript中setTimeout函數(shù)的執(zhí)行順序
前言
setTimeout，前端工程師必定會(huì)打交道的一個(gè)函數(shù)。它看上去非常的簡(jiǎn)單，樸實(shí)，有著一個(gè)很不平凡的名字--定時(shí)器。其實(shí)網(wǎng)上關(guān)于JavaScript中setTimeout的文章很多，但總感覺(jué)例子不夠直接具體，因此寫(xiě)了個(gè)簡(jiǎn)單的例子并加以解釋希望能讓大家明白setTimeout是如何執(zhí)行的。下面話不多說(shuō)了，來(lái)一起看看詳細(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);
代碼十分簡(jiǎn)單，想必大家都能看懂，執(zhí)行結(jié)果如下：
解釋?zhuān)?/strong>setTimeout屬于異步執(zhí)行函數(shù)，當(dāng)程序執(zhí)行完console.log(1,time1)后;遇到setTimeout會(huì)將該函數(shù)放入等待隊(duì)列，等待當(dāng)前主程序執(zhí)行完畢后開(kāi)始執(zhí)行setTimeout,由于后面的幾個(gè)都是setTimeout,因此都會(huì)放到等待隊(duì)列~~~
那么這些隊(duì)列里的函數(shù)誰(shuí)先執(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í)間始終是相對(duì)主程序執(zhí)行完畢的那個(gè)時(shí)間算的 ,并且多個(gè)setTimeout的先后順序也是由這個(gè)延遲時(shí)間決定的，如果遇到某個(gè)setTimeout需要花費(fèi)大量的時(shí)間怎么辦？可以參照上圖里執(zhí)行結(jié)果的數(shù)字2和數(shù)字5對(duì)應(yīng)的時(shí)間，由于js是單線程，所以當(dāng)執(zhí)行到這個(gè)setTimeout后，會(huì)將這個(gè)程序執(zhí)行完成后再去執(zhí)行下一個(gè)setTimeout,無(wú)論下一個(gè)setTimeout的延遲時(shí)間為多少，如果這兩個(gè)setTimeout時(shí)間的差值小于第一個(gè)setTimeout消耗的時(shí)間，程序會(huì)等待這個(gè)setTimeout執(zhí)行完成后立即執(zhí)行下一個(gè)setTimeout,如果差值大于消耗的時(shí)間，就按照和主程序約定的延遲（setTimeout里的第二個(gè)參數(shù)）執(zhí)行即可
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
- JS ES6中setTimeout函數(shù)的執(zhí)行上下文示例
- JS中SetTimeout和SetInterval使用初探
- js中setTimeout的妙用--防止循環(huán)超時(shí)
- JavaScript中從setTimeout與setInterval到AJAX異步
- JS中setTimeout和setInterval的最大延時(shí)值詳解
- JavaScript計(jì)時(shí)器用法分析【setTimeout和clearTimeout】
- 詳解JS中定時(shí)器setInterval和setTImeout的this指向問(wèn)題
- JavaScript setTimeout與setTimeinterval使用案例詳解
相關(guān)文章
javascript設(shè)計(jì)模式之Adapter模式【適配器模式】實(shí)現(xiàn)方法示例
這篇文章主要介紹了javascript設(shè)計(jì)模式之Adapter模式,結(jié)合實(shí)例形式分析了JS適配器模式的原理與具體實(shí)現(xiàn)方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2017-01-01
JavaScript中定時(shí)控制Throttle、Debounce和Immediate詳解
大家可能都知道JavaScript遵循事件驅(qū)動(dòng)的編程范例，這意味著一些行為可以激活一些響應(yīng)，并且這些響應(yīng)僅在發(fā)生特定的行為時(shí)才被激活。這篇文章將給大家詳細(xì)介紹JavaScript中的定時(shí)控制Throttle、Debounce和Immediate，有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。2016-11-11
昨天閑著沒(méi)事，又因?yàn)楣ぷ餍枰瑢?xiě)了一個(gè)腳本，用來(lái)做ftp。當(dāng)然不是直接做ftp，而是產(chǎn)生一個(gè)ftp的腳本，供ftp命令使用。2013-07-07
JavaScript find()方法及返回?cái)?shù)據(jù)實(shí)例
這篇文章主要介紹了JavaScript中的find()方法和返回?cái)?shù)據(jù)的內(nèi)存指向,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04
JavaScript JMap類(lèi)定義與使用方法示例
這篇文章主要介紹了JavaScript JMap類(lèi)定義與使用方法,涉及javascript類(lèi)的定義、內(nèi)部變量、函數(shù)的定義及使用相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
js獲取瀏覽器地址（獲取第1個(gè)斜杠后的內(nèi)容）
這篇文章主要給大家介紹了關(guān)于js獲取瀏覽器地址（獲取第1個(gè)斜杠后的內(nèi)容）的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
有人用JS做網(wǎng)站跳轉(zhuǎn),也有人用很多其他作弊的方法,今天又發(fā)現(xiàn)有太多的人用這樣的方法實(shí)現(xiàn)兩個(gè)站的IP共享,把http://m.fzitv.net替換成自己的站2008-09-09
這篇文章主要為大家詳細(xì)介紹了js Dom實(shí)現(xiàn)換膚效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
PHP實(shí)現(xiàn)的各種中文編碼轉(zhuǎn)換類(lèi)分享
這篇文章主要介紹了PHP實(shí)現(xiàn)的各種中文編碼轉(zhuǎn)換類(lèi)分享,本文類(lèi)庫(kù)支持簡(jiǎn)體中文、繁體中文、GB2312、BIG5、UTF-8等多種格式之間的轉(zhuǎn)換,需要的朋友可以參考下2015-01-01
js實(shí)現(xiàn)收縮菜單效果實(shí)例代碼
這篇文章介紹了js實(shí)現(xiàn)收縮菜單效果實(shí)例代碼，有需要的朋友可以參考一下2013-10-10