欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

實(shí)例詳解JavaScript中setTimeout函數(shù)的執(zhí)行順序

 更新時(shí)間:2017年07月12日 11:12:09   作者:藍(lán)藍(lán)  
關(guān)于javascript的運(yùn)行機(jī)制大家都應(yīng)該有所了解了吧,其實(shí)javascript是一個(gè)單線程的機(jī)制,但是因?yàn)殛?duì)列的關(guān)系它的表現(xiàn)會(huì)讓我們感覺是一個(gè)多線程的錯(cuò)覺。下面這篇文章通過實(shí)例主要給大家介紹了關(guān)于JavaScript中setTimeout函數(shù)執(zhí)行順序的相關(guān)資料,需要的朋友可以參考下。

前言

setTimeout,前端工程師必定會(huì)打交道的一個(gè)函數(shù)。它看上去非常的簡(jiǎn)單,樸實(shí),有著一個(gè)很不平凡的名字--定時(shí)器。其實(shí)網(wǎng)上關(guān)于JavaScript中setTimeout的文章很多,但總感覺例子不夠直接具體,因此寫了個(gè)簡(jiǎn)單的例子并加以解釋希望能讓大家明白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);

代碼十分簡(jiǎn)單,想必大家都能看懂,執(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í)間始終是相對(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,無論下一個(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í)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對(duì)腳本之家的支持。

相關(guān)文章

  • js中Math之random,round,ceil,floor的用法總結(jié)

    js中Math之random,round,ceil,floor的用法總結(jié)

    本篇文章是對(duì)js中Math之random,round,ceil,floor的用法進(jìn)行了總結(jié)介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助
    2013-12-12
  • textarea不能通過maxlength屬性來限制字?jǐn)?shù)的解決方法

    textarea不能通過maxlength屬性來限制字?jǐn)?shù)的解決方法

    textarea稱文本域,又稱文本區(qū),其不能通過maxlength屬性來限制字?jǐn)?shù),為此必須尋求其他方法來加以限制以達(dá)到預(yù)設(shè)的需求
    2014-09-09
  • 使用threejs實(shí)現(xiàn)第一人稱視角的移動(dòng)的問題(示例代碼)

    使用threejs實(shí)現(xiàn)第一人稱視角的移動(dòng)的問題(示例代碼)

    第一人稱視角的場(chǎng)景巡檢主要需要解決兩個(gè)問題,人物在場(chǎng)景中的移動(dòng)和碰撞檢測(cè)。移動(dòng)與碰撞功能是所有三維場(chǎng)景首先需要解決的基本問題,今天我們就通過最基本的threejs來完成第一人稱視角的場(chǎng)景巡檢功能,感興趣的朋友一起看看吧
    2022-02-02
  • uni-app動(dòng)態(tài)修改導(dǎo)航欄標(biāo)題簡(jiǎn)單步驟

    uni-app動(dòng)態(tài)修改導(dǎo)航欄標(biāo)題簡(jiǎn)單步驟

    uniapp作為一款開源軟件,可以做到一端多用,不過也有局限,在開發(fā)中有時(shí)候需要?jiǎng)討B(tài)的去修改標(biāo)題,下面這篇文章主要給大家介紹了關(guān)于uni-app動(dòng)態(tài)修改導(dǎo)航欄標(biāo)題的相關(guān)資料,需要的朋友可以參考下
    2023-06-06
  • 基于gulp合并壓縮Seajs模塊的方式說明

    基于gulp合并壓縮Seajs模塊的方式說明

    本文介紹一個(gè)簡(jiǎn)單可行的辦法,來做基于gulp構(gòu)建的中小型項(xiàng)目中的seajs合并壓縮,感興趣的朋友一起看看詳情吧
    2016-06-06
  • javascript代碼實(shí)現(xiàn)簡(jiǎn)易計(jì)算器

    javascript代碼實(shí)現(xiàn)簡(jiǎn)易計(jì)算器

    這篇文章主要為大家詳細(xì)介紹了javascript代碼實(shí)現(xiàn)簡(jiǎn)易計(jì)算器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-01-01
  • JavaScript中的Proxy代理的用法和功能詳解

    JavaScript中的Proxy代理的用法和功能詳解

    Proxy代理是JavaScript中一項(xiàng)強(qiáng)大而靈活的功能,它可以用于攔截、修改和自定義對(duì)象的底層操作,這篇文章主要介紹了JavaScript中的Proxy代理的各種用法和功能,需要的朋友可以參考下
    2023-06-06
  • JavaScript實(shí)現(xiàn)滑塊補(bǔ)圖驗(yàn)證碼效果

    JavaScript實(shí)現(xiàn)滑塊補(bǔ)圖驗(yàn)證碼效果

    這篇文章主要給大家介紹了JavaScript如何實(shí)現(xiàn)滑塊補(bǔ)圖驗(yàn)證碼效果,文章通過代碼示例介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴可以參考閱讀下
    2023-07-07
  • JavaScript this綁定過程深入詳解

    JavaScript this綁定過程深入詳解

    這篇文章主要介紹了JavaScript this綁定過程,結(jié)合實(shí)例形式深入分析了JavaScript中this關(guān)鍵字的功能、原理、綁定方式及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
    2018-12-12
  • 微信小程序調(diào)用攝像頭隱藏式拍照功能

    微信小程序調(diào)用攝像頭隱藏式拍照功能

    這篇文章主要介紹了微信小程序調(diào)用攝像頭隱藏式拍照功能,本文給大家?guī)砹私鉀Q方法、官網(wǎng)代碼和小編寫的比較完整代碼,需要的朋友可以參考下
    2018-08-08

最新評(píng)論