三張圖理解JS高級定時器

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

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

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

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

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

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

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

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/97570.html

相關(guān)文章

《第31天：JQuery - 輪播圖》

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

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

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

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

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

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

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

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

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

Pink 2019-08-23 12:22 評論0 收藏0