三張圖理解JS高級(jí)定時(shí)器

LiveVideoStack 發(fā)布于2019-08-23 11:51 / 1465人閱讀

摘要：圖二解讀定時(shí)器可以在指定時(shí)間把定時(shí)器代碼加入待執(zhí)行隊(duì)列，但并不能保證代碼執(zhí)行時(shí)機(jī)，待執(zhí)行隊(duì)列中的代碼要等進(jìn)程空閑時(shí)才能執(zhí)行。也就是說(shuō)定時(shí)器每隔間隔觸發(fā)一次，嘗試加入隊(duì)列，擁堵時(shí)段將直接忽略本次操作。

圖片出自JS高程（第三版）

圖一解讀：JS運(yùn)行于單線程的環(huán)境中：頁(yè)面載入時(shí)授限制性

圖二解讀：定時(shí)器可以在指定時(shí)間把定時(shí)器代碼加入待執(zhí)行隊(duì)列，但并不能保證代碼執(zhí)行時(shí)機(jī)，待執(zhí)行隊(duì)列中的代碼要等JS進(jìn)程空閑時(shí)才能執(zhí)行。

圖三解讀：setInterval每隔delay間隔嘗試創(chuàng)建定時(shí)器代碼實(shí)例并加入待執(zhí)行隊(duì)列，但為了避免定時(shí)器代碼連續(xù)運(yùn)行好幾次，若當(dāng)前待執(zhí)行隊(duì)列中已有定時(shí)器代碼實(shí)例，將不會(huì)創(chuàng)建新的定時(shí)器代碼實(shí)例加入待執(zhí)行隊(duì)列。

也就是說(shuō)setInterval定時(shí)器每隔delay間隔觸發(fā)一次，嘗試加入隊(duì)列，JS擁堵時(shí)段將直接忽略本次操作。

這可以保證setInterval定時(shí)器推入隊(duì)列的間隔一定不小于delay間隔，但不能保證其執(zhí)行間隔?？梢圆捎面?zhǔn)絪etTimeout可以保證其執(zhí)行間隔。

綜：以上是對(duì)定時(shí)器的個(gè)人理解，對(duì)此的重要應(yīng)用有幾點(diǎn)——數(shù)組分塊、函數(shù)節(jié)流和防抖等。主要是針對(duì)JS特性，通過(guò)設(shè)計(jì)實(shí)現(xiàn)方式來(lái)優(yōu)化其性能問(wèn)題。

GPU云服務(wù)器云服務(wù)器 js循環(huán) 理解 js閉包的理解 js事件監(jiān)聽(tīng)怎么理解三張

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/97570.html

相關(guān)文章

《第31天：JQuery - 輪播圖》

摘要：源碼下載地址鏈接提取碼寫這篇文章，當(dāng)做是對(duì)自已這一天的一個(gè)總結(jié)寫輪播圖要準(zhǔn)備的東西三張尺寸大小一樣的圖片分為三個(gè)模塊模塊，模塊，模塊模塊輪播圖引用本地固定的庫(kù)引入你寫的文件引入你寫的文件為你本地的圖片路徑，為你圖片的寬度，為類名左滑右滑 showImg(https://segmentfault.com/img/bVbi0YG?w=1408&h=363); 源碼下載地址：鏈接：https...

fuyi501 2019-08-02 11:48 評(píng)論0 收藏0
《第31天：JQuery - 輪播圖》

摘要：源碼下載地址鏈接提取碼寫這篇文章，當(dāng)做是對(duì)自已這一天的一個(gè)總結(jié)寫輪播圖要準(zhǔn)備的東西三張尺寸大小一樣的圖片分為三個(gè)模塊模塊，模塊，模塊模塊輪播圖引用本地固定的庫(kù)引入你寫的文件引入你寫的文件為你本地的圖片路徑，為你圖片的寬度，為類名左滑右滑 showImg(https://segmentfault.com/img/bVbi0YG?w=1408&h=363); 源碼下載地址：鏈接：https...

RiverLi 2019-08-23 12:29 評(píng)論0 收藏0
授人以漁式解析原生JS寫輪播圖

摘要：鼠標(biāo)放到輪播圖的圖片上時(shí)不再自動(dòng)輪播并且左右箭頭顯示出來(lái)，鼠標(biāo)移開(kāi)時(shí)左右箭頭隱藏掉并且自動(dòng)輪播。核心原理清除定時(shí)器，綁定事件，重構(gòu)下代碼封裝出往右往左輪播函數(shù)和自動(dòng)輪播函數(shù)。需求與分析需求：循環(huán)無(wú)縫自動(dòng)輪播五張圖，按左右箭頭可以手動(dòng)切換圖片，鼠標(biāo)點(diǎn)擊輪播圖下面按鈕 1 2 3 4 5會(huì)跳轉(zhuǎn)到對(duì)應(yīng)的第1 2 3 4 5張圖片。鼠標(biāo)放到輪播圖的圖片上時(shí)不再自動(dòng)輪播并且左右箭頭顯示出來(lái)，...

Zack 2019-08-29 16:58 評(píng)論0 收藏0
授人以漁式解析原生JS寫輪播圖

摘要：鼠標(biāo)放到輪播圖的圖片上時(shí)不再自動(dòng)輪播并且左右箭頭顯示出來(lái)，鼠標(biāo)移開(kāi)時(shí)左右箭頭隱藏掉并且自動(dòng)輪播。核心原理清除定時(shí)器，綁定事件，重構(gòu)下代碼封裝出往右往左輪播函數(shù)和自動(dòng)輪播函數(shù)。需求與分析需求：循環(huán)無(wú)縫自動(dòng)輪播五張圖，按左右箭頭可以手動(dòng)切換圖片，鼠標(biāo)點(diǎn)擊輪播圖下面按鈕 1 2 3 4 5會(huì)跳轉(zhuǎn)到對(duì)應(yīng)的第1 2 3 4 5張圖片。鼠標(biāo)放到輪播圖的圖片上時(shí)不再自動(dòng)輪播并且左右箭頭顯示出來(lái)，...

SKYZACK 2019-08-02 11:42 評(píng)論0 收藏0
授人以漁式解析原生JS寫輪播圖

摘要：鼠標(biāo)放到輪播圖的圖片上時(shí)不再自動(dòng)輪播并且左右箭頭顯示出來(lái)，鼠標(biāo)移開(kāi)時(shí)左右箭頭隱藏掉并且自動(dòng)輪播。核心原理清除定時(shí)器，綁定事件，重構(gòu)下代碼封裝出往右往左輪播函數(shù)和自動(dòng)輪播函數(shù)。需求與分析需求：循環(huán)無(wú)縫自動(dòng)輪播五張圖，按左右箭頭可以手動(dòng)切換圖片，鼠標(biāo)點(diǎn)擊輪播圖下面按鈕 1 2 3 4 5會(huì)跳轉(zhuǎn)到對(duì)應(yīng)的第1 2 3 4 5張圖片。鼠標(biāo)放到輪播圖的圖片上時(shí)不再自動(dòng)輪播并且左右箭頭顯示出來(lái)，...

Pink 2019-08-23 12:22 評(píng)論0 收藏0