使用setTimeout實(shí)現(xiàn)SetInterval原理解析

更新時(shí)間：2023年10月29日 08:46:06 作者：Tqing

這篇文章主要為大家介紹了使用setTimeout實(shí)現(xiàn)SetInterval原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

為什么要使用setTimeout來(lái)實(shí)現(xiàn)SetInterval?

我們知道setInterval以一定頻率來(lái)執(zhí)行一個(gè)函數(shù)，但是這樣有一個(gè)問(wèn)題，加入執(zhí)行的這個(gè)函數(shù)相當(dāng)耗時(shí)，超過(guò)了我們給定的周期時(shí)間，setInterval還會(huì)按照約定的時(shí)間來(lái)執(zhí)行下次任務(wù)嗎？

答案是不會(huì)，setInterval會(huì)等到當(dāng)前的任務(wù)執(zhí)行完成后，再立即執(zhí)行下一次的任務(wù)，看個(gè)例子

setInterval(function interval() {
  for(let i = 0; i < 10000000000; i++);
  console.log('done')
}, 1000)

打印語(yǔ)句出現(xiàn)的時(shí)間會(huì)超過(guò)1s，那么第2s的打印操作也會(huì)隨著被推遲。參考下圖，setInterval每次的時(shí)間間隔是從任務(wù)開始時(shí)間開始算的，盡量與下一次任務(wù)的開始執(zhí)行時(shí)間間隔和給定的時(shí)間間隔相同，一旦任務(wù)的執(zhí)行時(shí)間超過(guò)了給定的時(shí)間間隔，那么下一次任務(wù)會(huì)被推遲，下次任務(wù)會(huì)在本次任務(wù)結(jié)束后來(lái)執(zhí)行。

如何使用setTimeout來(lái)模擬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來(lái)實(shí)現(xiàn)SetInterval的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

js將網(wǎng)址轉(zhuǎn)為urlencode類型
網(wǎng)址urlencode加密函數(shù)，主要用于中文目錄
2008-06-06
layui導(dǎo)航欄二級(jí)菜單不顯示問(wèn)題及解決
這篇文章主要介紹了layui導(dǎo)航欄二級(jí)菜單不顯示問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
JS獲取字符串實(shí)際長(zhǎng)度(包含漢字)的簡(jiǎn)單方法
下面小編就為大家?guī)?lái)一篇JS獲取字符串實(shí)際長(zhǎng)度(包含漢字)的簡(jiǎn)單方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-08-08
JavaScript中實(shí)現(xiàn)數(shù)組分組功能的方法詳解
最近,JavaScript引入了一個(gè)備受期待的功能：原生支持?jǐn)?shù)組分組,這一特性使得在處理復(fù)雜的數(shù)據(jù)集時(shí)變得更加簡(jiǎn)單和高效,本文將深入探討這一全新的JavaScript特性,希望對(duì)大家有所幫助
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)前端頁(yè)面的搜索功能
這篇文章主要介紹了JS實(shí)現(xiàn)前端頁(yè)面的搜索功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2018-06-06
JavaScript實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁(yè)飄落的雪花
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁(yè)飄落的雪花，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-06-06
JSONP跨域模擬百度搜索
這篇文章主要介紹了JSONP跨域模擬百度搜索,JSONP是JSON?with?padding?的簡(jiǎn)寫,應(yīng)用JSON的一種新方法，在后來(lái)的Web服務(wù)中非常流行，JSONP看起來(lái)與JSON差不多，只不過(guò)是被包含在函數(shù)中調(diào)用的JSON,對(duì)此感興趣的小伙伴可以參考一下下面文章內(nèi)容
2021-12-12