使用setTimeout實現(xiàn)SetInterval原理解析
更新時間：2023年10月29日 08:46:06 作者：Tqing
這篇文章主要為大家介紹了使用setTimeout實現(xiàn)SetInterval原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
為什么要使用setTimeout來實現(xiàn)SetInterval?
我們知道setInterval以一定頻率來執(zhí)行一個函數(shù)，但是這樣有一個問題，加入執(zhí)行的這個函數(shù)相當耗時，超過了我們給定的周期時間，setInterval還會按照約定的時間來執(zhí)行下次任務嗎？
答案是不會，setInterval會等到當前的任務執(zhí)行完成后，再立即執(zhí)行下一次的任務，看個例子
setInterval(function interval() {
for(let i = 0; i < 10000000000; i++);
console.log('done')
}, 1000)打印語句出現(xiàn)的時間會超過1s，那么第2s的打印操作也會隨著被推遲。參考下圖，setInterval每次的時間間隔是從任務開始時間開始算的，盡量與下一次任務的開始執(zhí)行時間間隔和給定的時間間隔相同，一旦任務的執(zhí)行時間超過了給定的時間間隔，那么下一次任務會被推遲，下次任務會在本次任務結束后來執(zhí)行。
如何使用setTimeout來模擬setInterval?
借助與遞歸的思路，在上次任務結束后，立即安排下次任務的執(zhí)行，這樣保證上一個任務的結束時間到下一個任務的開始時間和給定時間是相等的
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) // 方便隨時取消
}以上就是使用setTimeout實現(xiàn)SetInterval原理解析的詳細內(nèi)容，更多關于setTimeout來實現(xiàn)SetInterval的資料請關注腳本之家其它相關文章！
相關文章
鼠標控制，空色方塊不要讓藍色方塊碰到就可以，看能玩多久，是個javascript不錯的一個游戲啊，想用js寫游戲的朋友可以參考下，看代碼應該是國外的人寫的2008-05-05
在JavaScript中,遍歷集合（如數(shù)組、對象、Map和Set等）有多種方式,下面給大家分享幾種常用的方法來講解Javascript中如何循環(huán),感興趣的朋友一起看看吧2025-04-04
Js模塊打包exports require import的用法和區(qū)別
這篇文章主要介紹了Js模塊打包exports require import的用法和區(qū)別，對模塊打包感興趣的同學，可以參考下2021-05-05
這篇文章主要介紹了微信小程序個人中心的列表控件實現(xiàn)代碼，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
這篇文章主要為大家詳細介紹了JavaScript瀑布流的實現(xiàn)方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-07-07
我們首先把window.innerWidth和window.innerHeight的值分別付給了pageWidth和pageHeight。2011-08-08
這篇文章主要介紹了p5.js入門教程之鍵盤交互,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
JavaScript（JS）和Python之間開發(fā)接口（API）示例
文章介紹了JavaScript與Python開發(fā)接口的兩種主流方式：RESTful?API和GraphQL?API,前者通過HTTP協(xié)議使用Express（Node.js）或Flask/Django?Rest?Framework（Python）構建,后者采用GraphQL語言配合Apollo?Server（Node.js）或Graphene（Python）實現(xiàn)2025-06-06
本篇文章小編為大家介紹，用js實現(xiàn)小球的自由移動代碼。需要的朋友參考下2013-04-04
關于圖片下載問題,不同的瀏覽器,需要兼容的下載方式,這篇文章主要給大家介紹了關于js圖片下載方式的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-01-01