JS忍者秘籍中的定時(shí)器機(jī)制詳解

keelii 發(fā)布于2019-08-22 18:11 / 3023人閱讀

摘要：設(shè)置和清除定時(shí)器直接引用忍者秘籍中的圖片注意定時(shí)器的時(shí)間間隔設(shè)為，也會(huì)有幾毫秒的延遲。以上參考資料忍者秘籍第章馴服線(xiàn)程和定時(shí)器

前言

前段時(shí)間剛看完《JS忍者秘籍》，雖說(shuō)是15年出版的，有些東西是過(guò)時(shí)了，但像對(duì)原型鏈、閉包、正則、定時(shí)器之類(lèi)的機(jī)制卻是不會(huì)過(guò)時(shí)的，里面很多東西都講的很細(xì)，還是值得一讀的，本文將對(duì)這本書(shū)中對(duì)定時(shí)器機(jī)制的部分進(jìn)行詳細(xì)的解析，如果喜歡的話(huà)可以點(diǎn)波贊/關(guān)注，支持一下，希望大家看完本文可以有所收獲。

個(gè)人博客了解一下：obkoro1.com

準(zhǔn)備

閱讀本文之前，推薦先閱讀Js 的事件循環(huán)(Event Loop)機(jī)制以及實(shí)例講解這篇文章來(lái)理解背后發(fā)生的事情，本文對(duì)事件循環(huán)機(jī)制不會(huì)很仔細(xì)的講解。

定時(shí)器解決的問(wèn)題：

由于JS的單線(xiàn)程特性，定時(shí)器提供了一種跳出單線(xiàn)程限制的方法，即讓一段代碼在一定毫秒之后，再異步執(zhí)行。

設(shè)置和清除定時(shí)器：

直接引用忍者秘籍中的圖片：

注意：

定時(shí)器的時(shí)間間隔設(shè)為0，也會(huì)有幾毫秒的延遲。

在使用setTimeout和setInterval的時(shí)候最好將其賦值給一個(gè)變量，以便取消定時(shí)器。

在使用Vue的時(shí)候，setTimeout和setInterval的this指向的是window對(duì)象，訪問(wèn)不到組件數(shù)據(jù)以及方法。

在使用Vue的時(shí)候，路由跳轉(zhuǎn)并不會(huì)銷(xiāo)毀setInterval，但是組件已經(jīng)銷(xiāo)毀了，這會(huì)導(dǎo)致問(wèn)題。

在執(zhí)行線(xiàn)程中setTimeout/setInterval無(wú)法保證準(zhǔn)時(shí)執(zhí)行回調(diào)函數(shù)的。

setInterval調(diào)用有可能會(huì)被廢棄以及setInterval的連續(xù)執(zhí)行

第三點(diǎn)和第四點(diǎn)的解決方法可以參考我之前寫(xiě)的Vue 實(shí)踐過(guò)程中的幾個(gè)問(wèn)題。

接下來(lái)要講的是第五點(diǎn)和第六點(diǎn)，這兩點(diǎn)是最重要，也是本文要重點(diǎn)解析的內(nèi)容。

執(zhí)行線(xiàn)程中的定時(shí)器執(zhí)行

下面來(lái)看忍者秘籍中的栗子：

讓我們看看這里發(fā)生了什么事情：

首先在0毫秒的時(shí)候有一個(gè)持續(xù)18毫秒的js代碼塊要執(zhí)行。

然后在0毫秒的時(shí)候設(shè)了兩個(gè)10毫秒延遲的定時(shí)器，setTimeout以及setInterval,setTimeout先設(shè)定。

在第6毫秒的時(shí)候有一個(gè)發(fā)生了鼠標(biāo)單擊事件。

事件排隊(duì)。

同時(shí)發(fā)生了這么多事情，由于js的單線(xiàn)程特性，當(dāng)線(xiàn)程正在執(zhí)行狀態(tài)，有異步事件觸發(fā)時(shí)，它就會(huì)排隊(duì)，并且在線(xiàn)程空閑時(shí)才進(jìn)行執(zhí)行。

    這里的異步事件包括：鼠標(biāo)單擊，定時(shí)器觸發(fā)，ajax請(qǐng)求、promise等事件。

讓我們回到栗子中：

栗子中首先有一個(gè)18毫秒的代碼塊要執(zhí)行，在這18毫秒中只能執(zhí)行這段代碼塊，其他事件觸發(fā)了之后只能排隊(duì)等待執(zhí)行。

在代碼塊還在運(yùn)行期間，第6毫秒的時(shí)候，發(fā)生了一個(gè)鼠標(biāo)單擊事件，以及第10毫秒時(shí)的setTimeout和setInterval兩個(gè)處理程序，這三個(gè)事件不能立即執(zhí)行，而是被添加到等待執(zhí)行的隊(duì)列中。

先進(jìn)先出(先排隊(duì)的先執(zhí)行)

18毫秒的時(shí)候代碼塊結(jié)束執(zhí)行，有三個(gè)任務(wù)在排隊(duì)等待執(zhí)行，根據(jù)先進(jìn)先出的原則，此時(shí)會(huì)先執(zhí)行click事件，setTimeout和setInterval將繼續(xù)排隊(duì)等待執(zhí)行。

setInterval調(diào)用被廢棄

在click事件執(zhí)行時(shí)，第20毫秒處，第二個(gè)setInterval也到期了，因?yàn)榇藭r(shí)已經(jīng)click事件占用了線(xiàn)程，所以setInterval還是不能被執(zhí)行，并且因?yàn)榇藭r(shí)隊(duì)列中已經(jīng)有一個(gè)setInterval正在排隊(duì)等待執(zhí)行，所以這一次的setInterval的調(diào)用將被廢棄。

瀏覽器不會(huì)對(duì)同一個(gè)setInterval處理程序多次添加到待執(zhí)行隊(duì)列。

setTimeout/setInterval無(wú)法保證準(zhǔn)時(shí)執(zhí)行回調(diào)函數(shù)

click事件在第28毫秒處結(jié)束執(zhí)行，有兩個(gè)任務(wù)(setTimeout和setInterval)正在等待執(zhí)行，遵循先進(jìn)先出的原則，setTimeout早于setInterval設(shè)定，所以先執(zhí)行setTimeout。

so:我們期望在第10毫秒處執(zhí)行的setTimeout處理程序，最終會(huì)在第28毫秒處才開(kāi)始執(zhí)行，這就是上文提到的setTimeout/setInterval無(wú)法保證準(zhǔn)時(shí)執(zhí)行回調(diào)函數(shù)。

在30毫秒處，setInterval又觸發(fā)了，因?yàn)殛?duì)列中已經(jīng)有setInterval在排隊(duì)，所以這次的觸發(fā)又作廢了。

setInterval的連續(xù)執(zhí)行

setTimeout執(zhí)行結(jié)束，在第36毫秒處，隊(duì)列中的setInterval處理程序才開(kāi)始執(zhí)行，setInterval需要執(zhí)行6毫秒。

在第40毫秒的時(shí)候setInterval再次觸發(fā)，因?yàn)榇藭r(shí)上一個(gè)setInterval正在執(zhí)行期間，隊(duì)列中并沒(méi)有setInterval在排隊(duì)，這次觸發(fā)的setInterval將進(jìn)入隊(duì)列等候。

所以：setInterval的處理時(shí)長(zhǎng)不能比設(shè)定的間隔長(zhǎng)，否則setInterval將會(huì)沒(méi)有間隔的重復(fù)執(zhí)行

第42毫秒的時(shí)候，第一個(gè)setInterval結(jié)束，然后隊(duì)列中的setInterval立即開(kāi)始執(zhí)行，在48毫秒的時(shí)候完成執(zhí)行。然后50毫秒的時(shí)候再次觸發(fā)setInterval，此時(shí)沒(méi)有任務(wù)在排隊(duì)，將會(huì)立即執(zhí)行。

setTimeout按照一定的間隔周期性的觸發(fā)定時(shí)器。

上文說(shuō)了，setInterval的處理時(shí)長(zhǎng)不能比設(shè)定的間隔長(zhǎng)，否則setInterval將會(huì)沒(méi)有間隔的重復(fù)執(zhí)行。

但是對(duì)這個(gè)問(wèn)題，很多情況下，我們并不能清晰的把控處理程序所消耗的時(shí)長(zhǎng)，為了我們能按照一定的間隔周期性的觸發(fā)定時(shí)器，忍者秘籍中提供了下面這種使用方法：

    // 實(shí)際上我不止在忍者秘籍中見(jiàn)過(guò)，在很多地方都見(jiàn)過(guò)這種技術(shù)。
    setTimeout(function repeatMe(){
      // do something
      setTimeout(repeatMe,10); 
      // 執(zhí)行完處理程序的內(nèi)容后，在末尾再間隔10毫秒來(lái)調(diào)用該程序，這樣就能保證一定是10毫秒的周期調(diào)用
    },10)

忍者秘籍中關(guān)于定時(shí)器的其他知識(shí)：

定時(shí)器不能非常細(xì)粒化的控制執(zhí)行的時(shí)間，書(shū)中建議在15ms以上。

可以使用定時(shí)器來(lái)分解長(zhǎng)時(shí)間運(yùn)行的任務(wù)，這里可以自行谷歌。

任務(wù)隊(duì)列只有排隊(duì)這么簡(jiǎn)單嗎？

事實(shí)上，關(guān)于任務(wù)隊(duì)列并不是只有簡(jiǎn)單的排隊(duì)而已，忍者秘籍中提到為了方便，使用了這個(gè)概念，如果希望能更清晰的了解背后的機(jī)制，再次推薦閱讀一下：Js 的事件循環(huán)(Event Loop)機(jī)制以及實(shí)例講解，

結(jié)語(yǔ)

這上面所有一切，都是由js單線(xiàn)程特性導(dǎo)致的，所以會(huì)有事件排隊(duì)、先進(jìn)先出、setInterval調(diào)用被廢棄、定時(shí)器無(wú)法保證準(zhǔn)時(shí)執(zhí)行回調(diào)函數(shù)以及出現(xiàn)setInterval的連續(xù)執(zhí)行，時(shí)刻記住這一特性，很多關(guān)于事件執(zhí)行順序的問(wèn)題都能想的通，并且找出解決方法。

希望看完的朋友可以點(diǎn)個(gè)喜歡/關(guān)注，您的支持是對(duì)我最大的鼓勵(lì)。

個(gè)人blog and 掘金個(gè)人主頁(yè)，如需轉(zhuǎn)載，請(qǐng)放上原文鏈接并署名。碼字不易，感謝支持！本人寫(xiě)文章本著交流記錄的心態(tài)，寫(xiě)的不好之處，不撕逼，但是歡迎指點(diǎn)。

如果喜歡本文的話(huà)，歡迎關(guān)注我的訂閱號(hào)，漫漫技術(shù)路，期待未來(lái)共同學(xué)習(xí)成長(zhǎng)。

以上2018.6.17

參考資料：

JS忍者秘籍第8章:馴服線(xiàn)程和定時(shí)器