<strike id="cy2gs"><menu id="cy2gs"></menu></strike>
  • <del id="cy2gs"><dfn id="cy2gs"></dfn></del>
  • 你不知道的JavaScript:有趣的setTimeout

    2018-5-7    周周

         話不多說,先上代碼

         for(var j=0;j<10;J++){

             setTimeout(function(){console.log(j);},5000)

         }

         看到這三行代碼,你也許會不耐煩道:又要講閉包?要吐槽了好么?別急,讓我們先來思考一下,這段代碼在瀏覽器中的執(zhí)行結(jié)果是什么?

         <!-- more -->

         甲:順序打印0到9?

         乙:這題我見過,打印十個10!

         哪個答案正確?

         執(zhí)行結(jié)果顯示,瀏覽器打印出十個10,貌似乙對了,但是如果你足夠細(xì)心,你會發(fā)現(xiàn)幾個問題:為什么會循環(huán)打印十個10,而不是0到9?

         從結(jié)果來看,for循環(huán)執(zhí)行完跳出之后,才開始執(zhí)行setTimeout(所以j才等于10),為什么不是每次迭代都執(zhí)行一次setTimeout呢?

    1、為什么會循環(huán)打印十個10?

          許多人習(xí)慣用第二個問題中的執(zhí)行結(jié)果來回答這個問題:“for循環(huán)執(zhí)行完畢跳出之后才開始執(zhí)行setTimeout,所以才打印了十個10”。這樣的答案,只能說是既應(yīng)付了自己,又應(yīng)付了別人。其實,要解答第一個問題,首先要解答第二個問題。

    2、為什么不是每一次迭代都執(zhí)行一次setTimeout?

         大家都知道,JavaScript在ES6出現(xiàn)以前,是沒有塊狀作用域的,這就意味著,在for循環(huán)中用var定義的變量j,其實是屬于全局的,那其實整個全局作用域中只有一個j,每次for循環(huán)都是更新這個j。

           那么現(xiàn)在的關(guān)鍵問題在于,為什么整個for循環(huán)會先于setTimeout執(zhí)行,而不是我們正常理解的,一次迭代執(zhí)行一次。這就涉及到了JavaScript的核心特性:單線程。

           JavaScript設(shè)計的初衷,是瀏覽器用來與用戶進行交互和DOM操作的,這就決定了它必須是單線程的。設(shè)想JavaScript同時有兩個線程,一個線程在DOM節(jié)點內(nèi)添加內(nèi)容,一個線程刪除該節(jié)點,瀏覽器就會出現(xiàn)混亂。所以,為了避免復(fù)雜性,從一誕生,JavaScript就是單線程,這已經(jīng)成為了這門語言的核心特征,將來也不會改變。

          單線程就意味著,所有任務(wù)需要排隊,前一個任務(wù)結(jié)束,才會執(zhí)行下一個任務(wù),如果前一個任務(wù)耗時很長,后一個任務(wù)就不得不一直等著。

          為了優(yōu)化單線程的性能,JavaScript將任務(wù)分成兩種,一種是同步任務(wù)(synchronous),另一種是異步任務(wù)(asynchronous)。同步任務(wù)指的是,在主線程上排隊執(zhí)行的任務(wù),只有前一個任務(wù)執(zhí)行完畢,才能執(zhí)行后一個任務(wù);異步任務(wù)指的是,不進入主線程,而進入“任務(wù)隊列(task queue)”的任務(wù),只用主線程中的同步任務(wù)執(zhí)行完畢,異步任務(wù)才會進入執(zhí)行隊列執(zhí)行。只要主線程空了,就會去讀取“任務(wù)隊列”,這就是JavaScript的運作機制。這個過程會不斷重復(fù)。

           而setTimeout就被JavaScript定義為異步任務(wù)。每次for循環(huán)的迭代,都將setTimeout中的回調(diào)函數(shù)加入任務(wù)隊列等待執(zhí)行。也就是說,只有同步任務(wù)中的for循環(huán)完全結(jié)束,主線程中才會去任務(wù)列表中找到尚未執(zhí)行的十個setTimeout(十次迭代)回調(diào)函數(shù)并順序執(zhí)行(先進先出)。而此時,j已經(jīng)經(jīng)過循環(huán)結(jié)束變成了10,所以此時主線程執(zhí)行的,是十個一模一樣的打印i的回調(diào)函數(shù),即打印十個10,。至此完美回答了第一和第二個問題,文章開頭的代碼與下面的代碼其實是等價的:

           for(var i=0;i<10;i++){

                setTimeout(console.log(i),5000);

                setTimeout(console.log(i),5000);

                setTimeout(console.log(i),5000);

                setTimeout(console.log(i),5000);

                setTimeout(console.log(i),5000);

                setTimeout(console.log(i),5000);

                setTimeout(console.log(i),5000);

                setTimeout(console.log(i),5000);

                setTimeout(console.log(i),5000);

                setTimeout(console.log(i),5000);

    }

           小小的一個setTimeout,牽扯出了很多JavaScript的深層次問題,可見JavaScript還有許多地方是值得深入探究的。



    日歷

    鏈接

    個人資料

    藍藍設(shè)計的小編 http://www.skdbbs.com

    存檔

    主站蜘蛛池模板: 国产伦精品一区二区三区| 国产精品1024香蕉在线观看| 精品国产VA久久久久久久冰| 精品国产热久久久福利| 国产日韩欧美精品| 无码精品久久久久久人妻中字| 久久久精品人妻一区二区三区蜜桃| 国产精品99爱免费视频| 第一福利永久视频精品| 亚洲无线观看国产精品| 乱码精品一区二区三区| 老司机精品影院91| 国产韩国精品一区二区三区| 91精品国产福利在线导航| 日韩精品乱码AV一区二区| 人妻无码精品久久亚瑟影视| 香蕉99久久国产综合精品宅男自| 99九九精品免费视频观看| 国产精品久久网| 国产成人精品日本亚洲网站| 久久精品国产亚洲AV无码娇色| 亚洲欧洲国产精品香蕉网| 亚洲国产成人a精品不卡在线| 国产亚洲精品线观看动态图| 国产成人毛片亚洲精品| 亚洲韩精品欧美一区二区三区| 精品免费久久久久国产一区| 嫩草伊人久久精品少妇AV| 亚洲国产精品嫩草影院在线观看| 亚洲а∨天堂久久精品9966| 欧美成人精品第一区二区三区| 精品日韩欧美国产| 精品久久久久久无码中文字幕| 国产精品视频一区二区三区不卡| 国产精品第一区第27页| 成人国产精品秘 果冻传媒在线| 免费视频精品一区二区三区| 久久亚洲国产午夜精品理论片 | 久久亚洲中文字幕精品有坂深雪| 亚洲精品99久久久久中文字幕| 亚洲综合欧美精品一区二区|