定時(shí)器是什么饲漾?

大家好,我是IT修真院武漢第10期學(xué)員缕溉,一枚正直、純潔吃型、善良的前端程序員证鸥。

今天給大家分享一下,修真院官網(wǎng)任務(wù)JS-task1,深度思考的知識(shí)點(diǎn)——什么是定時(shí)器枉层?有什么用泉褐?

1.背景介紹

瀏覽器(或者說JS引擎)執(zhí)行JS的機(jī)制是基于事件循環(huán)。

由于JS是單線程鸟蜡,所以同一時(shí)間只能執(zhí)行一個(gè)任務(wù)膜赃,其他任務(wù)就得排隊(duì),后續(xù)任務(wù)必須等到前一個(gè)任務(wù)結(jié)束才能開始執(zhí)行揉忘。

為了避免因?yàn)槟承╅L(zhǎng)時(shí)間任務(wù)造成的無意義等待跳座,JS引入了異步的概念,用另一個(gè)線程來管理異步任務(wù)泣矛。

同步任務(wù)直接在主線程隊(duì)列中順序執(zhí)行疲眷,而異步任務(wù)會(huì)進(jìn)入另一個(gè)任務(wù)隊(duì)列,不會(huì)阻塞主線程您朽。等到主線程隊(duì)列空了(執(zhí)行完了)的時(shí)候狂丝,就會(huì)去異步隊(duì)列查詢是否有可執(zhí)行的異步任務(wù)了(異步任務(wù)通常進(jìn)入異步隊(duì)列之后還要等一些條件才能執(zhí)行,如ajax請(qǐng)求哗总、文件讀寫)几颜,如果某個(gè)異步任務(wù)可以執(zhí)行了便加入主線程隊(duì)列,以此循環(huán)讯屈。

JS定時(shí)器

JS的定時(shí)器目前有三個(gè):setTimeout蛋哭、setInterval和setImmediate。

定時(shí)器也是一種異步任務(wù)耻煤,通常瀏覽器都有一個(gè)獨(dú)立的定時(shí)器模塊具壮,定時(shí)器的延遲時(shí)間就由定時(shí)器模塊來管理,當(dāng)某個(gè)定時(shí)器到了可執(zhí)行狀態(tài)哈蝇,就會(huì)被加入主線程隊(duì)列棺妓。

JS定時(shí)器非常實(shí)用,做動(dòng)畫的肯定都用到過炮赦,也是最常用的異步模型之一怜跑。

有時(shí)候一些奇奇怪怪的問題,加一個(gè)setTimeout(fn, 0)(以下簡(jiǎn)寫setTimeout(0))就解決了吠勘。不過性芬,如果對(duì)定時(shí)器本身不熟悉,也會(huì)產(chǎn)生一些奇奇怪怪的問題剧防。



2.知識(shí)剖析

setTimeout

setTimeout(fn, x)表示延遲x毫秒之后執(zhí)行fn植锉。

使用的時(shí)候千萬不要太相信預(yù)期,延遲的時(shí)間嚴(yán)格來說總是大于x毫秒的峭拘,至于大多少就要看當(dāng)時(shí)JS的執(zhí)行情況了俊庇。另外狮暑,多個(gè)定時(shí)器如不及時(shí)清除(clearTimeout),會(huì)存在干擾辉饱,使延遲時(shí)間更加捉摸不透搬男。所以,不管定時(shí)器有沒有執(zhí)行完彭沼,及時(shí)清除已經(jīng)不需要的定時(shí)器是個(gè)好習(xí)慣缔逛。HTML5規(guī)范規(guī)定最小延遲時(shí)間不能小于4ms,即x如果小于4姓惑,會(huì)被當(dāng)做4來處理褐奴。 不過不同瀏覽器的實(shí)現(xiàn)不一樣,比如挺益,Chrome可以設(shè)置1ms歉糜,IE11/Edge是4ms。setTimeout注冊(cè)的函數(shù)fn會(huì)交給瀏覽器的定時(shí)器模塊來管理望众,延遲時(shí)間到了就將fn加入主進(jìn)程執(zhí)行隊(duì)列匪补,如果隊(duì)列前面還有沒有執(zhí)行完的代碼,則又需要花一點(diǎn)時(shí)間等待才能執(zhí)行到fn烂翰,所以實(shí)際的延遲時(shí)間會(huì)比設(shè)置的長(zhǎng)夯缺。如在fn之前正好有一個(gè)超級(jí)大循環(huán),那延遲時(shí)間就不是一丁點(diǎn)了甘耿。

setInterval

setInterval的實(shí)現(xiàn)機(jī)制跟setTimeout類似踊兜,只不過setInterval是重復(fù)執(zhí)行的。 對(duì)setInterval(fn, 100)容易產(chǎn)生一個(gè)誤區(qū):并不是上一次fn執(zhí)行完了之后再過100ms才開始執(zhí)行下一次fn佳恬。 事實(shí)上捏境,setInterval并不管上一次fn的執(zhí)行結(jié)果,而是每隔100ms就將fn放入主線程隊(duì)列毁葱,而兩次fn之間具體間隔多久就不一定了垫言,跟setTimeout實(shí)際延遲時(shí)間類似,和JS執(zhí)行情況有關(guān)倾剿。

3.常見問題

定時(shí)器引起的代碼超級(jí)無敵托馬斯回旋式爆炸阻塞


4.解決方案

清除定時(shí)器唄~

5.編碼實(shí)戰(zhàn)

還有那些方法可以實(shí)現(xiàn)定時(shí)器或類似定時(shí)器的效果筷频?

Promise

Promise是很常用的一種異步模型,如果我們想讓代碼在下一個(gè)事件循環(huán)執(zhí)行前痘,可以選擇使用setTimeout(0)凛捏、setImmediate、requestAnimationFrame(Chrome)和Promise芹缔。而且Promise的延遲比setImmediate更低坯癣,意味著Promise比setImmediate先執(zhí)行。

6.擴(kuò)展思考

7.參考文獻(xiàn)

JS定時(shí)器與執(zhí)行機(jī)制解析

8.更多討論

詳情請(qǐng)看:

視頻鏈接

PPT鏈接

Q1:在我們?nèi)粘9ぷ髦凶钋罚心男┑胤綍?huì)用到定時(shí)器坡锡?

答:動(dòng)畫蓬网。

Q2:除了前文提到的兩種常用的定時(shí)器,你還接觸過哪些定時(shí)器的使用鹉勒?

答:promise。

Q3:在定時(shí)器的使用過程中可能存在哪些問題吵取?

答:代碼阻塞禽额。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市皮官,隨后出現(xiàn)的幾起案子脯倒,更是在濱河造成了極大的恐慌,老刑警劉巖捺氢,帶你破解...
    沈念sama閱讀 222,627評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件藻丢,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡摄乒,警方通過查閱死者的電腦和手機(jī)悠反,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,180評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來馍佑,“玉大人斋否,你說我怎么就攤上這事∈没纾” “怎么了茵臭?”我有些...
    開封第一講書人閱讀 169,346評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)舅世。 經(jīng)常有香客問我旦委,道長(zhǎng),這世上最難降的妖魔是什么雏亚? 我笑而不...
    開封第一講書人閱讀 60,097評(píng)論 1 300
  • 正文 為了忘掉前任缨硝,我火速辦了婚禮,結(jié)果婚禮上评凝,老公的妹妹穿的比我還像新娘追葡。我一直安慰自己,他們只是感情好奕短,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,100評(píng)論 6 398
  • 文/花漫 我一把揭開白布宜肉。 她就那樣靜靜地躺著,像睡著了一般翎碑。 火紅的嫁衣襯著肌膚如雪谬返。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,696評(píng)論 1 312
  • 那天日杈,我揣著相機(jī)與錄音遣铝,去河邊找鬼佑刷。 笑死,一個(gè)胖子當(dāng)著我的面吹牛酿炸,可吹牛的內(nèi)容都是我干的瘫絮。 我是一名探鬼主播,決...
    沈念sama閱讀 41,165評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼填硕,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼麦萤!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起扁眯,我...
    開封第一講書人閱讀 40,108評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤壮莹,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后姻檀,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體命满,經(jīng)...
    沈念sama閱讀 46,646評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,709評(píng)論 3 342
  • 正文 我和宋清朗相戀三年绣版,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了胶台。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,861評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡僵娃,死狀恐怖概作,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情默怨,我是刑警寧澤讯榕,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站匙睹,受9級(jí)特大地震影響愚屁,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜痕檬,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,196評(píng)論 3 336
  • 文/蒙蒙 一霎槐、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧梦谜,春花似錦丘跌、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,698評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至荒澡,卻和暖如春报辱,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背单山。 一陣腳步聲響...
    開封第一講書人閱讀 33,804評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工碍现, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留幅疼,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,287評(píng)論 3 379
  • 正文 我出身青樓昼接,卻偏偏與公主長(zhǎng)得像爽篷,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子慢睡,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,860評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 從JS執(zhí)行機(jī)制說起 瀏覽器(或者說JS引擎)執(zhí)行JS的機(jī)制是基于事件循環(huán)狼忱。 由于JS是單線程,所以同一時(shí)間只能執(zhí)行...
    love2013閱讀 881評(píng)論 0 1
  • 9.26-9.30 第8章 馴服線程和定時(shí)器 定時(shí)器可以在js中使用一睁,但它不是js的一項(xiàng)功能,如果我們?cè)诜菫g覽器環(huán)...
    如201608閱讀 594評(píng)論 0 2
  • 定時(shí)器并不屬于JavaScript 雖然我們一直在JavaScript中使用定時(shí)器佃却,但是它并不是javascrip...
    打鐵大師閱讀 861評(píng)論 0 4
  • 弄懂js異步 講異步之前者吁,我們必須掌握一個(gè)基礎(chǔ)知識(shí)-event-loop。 我們知道JavaScript的一大特點(diǎn)...
    DCbryant閱讀 2,714評(píng)論 0 5
  • 一饲帅、什么是定時(shí)器 JS提供了一些原生方法來實(shí)現(xiàn)延時(shí)去執(zhí)行某一段代碼复凳,下面來簡(jiǎn)單介紹一下 setTimeout: 設(shè)...
    SSSSSSH閱讀 933評(píng)論 1 50