使用setTimeout實(shí)現(xiàn)SetInterval原理解析
為什么要使用setTimeout來實(shí)現(xiàn)SetInterval?
我們知道setInterval以一定頻率來執(zhí)行一個(gè)函數(shù)，但是這樣有一個(gè)問題，加入執(zhí)行的這個(gè)函數(shù)相當(dāng)耗時(shí)，超過了我們給定的周期時(shí)間，setInterval還會按照約定的時(shí)間來執(zhí)行下次任務(wù)嗎？
答案是不會，setInterval會等到當(dāng)前的任務(wù)執(zhí)行完成后，再立即執(zhí)行下一次的任務(wù)，看個(gè)例子
setInterval(function interval() {
for(let i = 0; i < 10000000000; i++);
console.log('done')
}, 1000)打印語句出現(xiàn)的時(shí)間會超過1s，那么第2s的打印操作也會隨著被推遲。參考下圖，setInterval每次的時(shí)間間隔是從任務(wù)開始時(shí)間開始算的，盡量與下一次任務(wù)的開始執(zhí)行時(shí)間間隔和給定的時(shí)間間隔相同，一旦任務(wù)的執(zhí)行時(shí)間超過了給定的時(shí)間間隔，那么下一次任務(wù)會被推遲，下次任務(wù)會在本次任務(wù)結(jié)束后來執(zhí)行。
如何使用setTimeout來模擬setInterval?
借助與遞歸的思路，在上次任務(wù)結(jié)束后，立即安排下次任務(wù)的執(zhí)行，這樣保證上一個(gè)任務(wù)的結(jié)束時(shí)間到下一個(gè)任務(wù)的開始時(shí)間和給定時(shí)間是相等的
function setInterval2(fn, ms, ...args) {
let timeId = null
function tick() {
timeId = setTimeout(() => {
fn(...args)
tick()
}, ms)
}
fn(...args)
tick()
return () => clearTimeout(timeId)
}
function setInterval3(fn, ms, ...args) {
fn(...args)
let timeId = setTimeout(function tick() {
fn(...args)
timeId = setTimeout(tick, ms)
}, ms)
return () => clearTimeout(timeId) // 方便隨時(shí)取消
}以上就是使用setTimeout實(shí)現(xiàn)SetInterval原理解析的詳細(xì)內(nèi)容，更多關(guān)于setTimeout來實(shí)現(xiàn)SetInterval的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
js將網(wǎng)址轉(zhuǎn)為urlencode類型
網(wǎng)址urlencode加密函數(shù)，主要用于中文目錄2008-06-06
這篇文章主要介紹了layui導(dǎo)航欄二級菜單不顯示問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
下面小編就為大家?guī)硪黄狫S獲取字符串實(shí)際長度(包含漢字)的簡單方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
JavaScript中實(shí)現(xiàn)數(shù)組分組功能的方法詳解
最近,JavaScript引入了一個(gè)備受期待的功能：原生支持?jǐn)?shù)組分組,這一特性使得在處理復(fù)雜的數(shù)據(jù)集時(shí)變得更加簡單和高效,本文將深入探討這一全新的JavaScript特性,希望對大家有所幫助2023-12-12
Javascript實(shí)現(xiàn)鼠標(biāo)右鍵特色菜單
鼠標(biāo)右鍵大家都經(jīng)常操作，但是鼠標(biāo)的內(nèi)容是不是符合大家的“口味”？這篇文章就是教大家如何定制自己專屬鼠標(biāo)右鍵,需要的朋友可以參考下2015-08-08
js實(shí)現(xiàn)圖片實(shí)時(shí)時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片實(shí)時(shí)時(shí)鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
與ClientWidth有關(guān)的一點(diǎn)資料
與ClientWidth有關(guān)的一點(diǎn)資料...2006-08-08
這篇文章主要介紹了JS實(shí)現(xiàn)前端頁面的搜索功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-06-06
JavaScript實(shí)現(xiàn)動態(tài)網(wǎng)頁飄落的雪花
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)動態(tài)網(wǎng)頁飄落的雪花，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要介紹了JSONP跨域模擬百度搜索,JSONP是JSON?with?padding?的簡寫,應(yīng)用JSON的一種新方法，在后來的Web服務(wù)中非常流行，JSONP看起來與JSON差不多，只不過是被包含在函數(shù)中調(diào)用的JSON,對此感興趣的小伙伴可以參考一下下面文章內(nèi)容2021-12-12