快捷導(dǎo)航

JS中setTimeout和setInterval的最大延時(shí)值詳解

更新時(shí)間：2017年02月13日 10:56:42 作者：Heero.Luo

這篇文章主要介紹了JS中setTimeout和setInterval的最大延時(shí)值的相關(guān)資料，文中通過(guò)示例代碼介紹的很詳細(xì)，相信對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。

前言

JavaScript提供定時(shí)執(zhí)行代碼的功能，叫做定時(shí)器（timer），主要由setTimeout()和setInterval()這兩個(gè)函數(shù)來(lái)完成。而這篇文中主要給大家介紹的是關(guān)于JS中setTimeout和setInterval最大延時(shí)值的相關(guān)問(wèn)題，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。

先來(lái)看這樣一段代碼：

function update() {
 loadData().then(function(data) {
  $('#content').html(data.content);
  var delay = data.nextUpdateTime - new Date();
  if (delay > 0) {
   setTimeout(update, delay);
  }
 });
}

其流程非常簡(jiǎn)單：通過(guò)AJAX加載數(shù)據(jù)后更新HTML的內(nèi)容；如果有指定下次更新時(shí)間，則通過(guò)計(jì)時(shí)器在該時(shí)間點(diǎn)再執(zhí)行一次整個(gè)流程。

要說(shuō)這段代碼有什么隱患的話，那就是data.nextUpdateTime與當(dāng)前時(shí)間的時(shí)間差（即delay變量的值）比較小的時(shí)候，會(huì)導(dǎo)致內(nèi)容頻繁更新。但這是屬于正常的業(yè)務(wù)邏輯，要優(yōu)化就只能犧牲內(nèi)容更新的即時(shí)性。然而這里我要說(shuō)的是，當(dāng)時(shí)間差非常大的時(shí)候，也會(huì)出現(xiàn)同樣的問(wèn)題。

下面模擬一下這個(gè)場(chǎng)景：

function log() {
 console.log('executed');
}

var nextUpdateTime = new Date();
// 設(shè)為一個(gè)月后
nextUpdateTime.setMonth(nextUpdateTime.getMonth() + 1);

var delay = nextUpdateTime - new Date();
setTimeout(log, delay);

這段代碼的原意是讓log函數(shù)在一個(gè)月后執(zhí)行，但是運(yùn)行一下就可以發(fā)現(xiàn)，該函數(shù)會(huì)馬上執(zhí)行。為什么會(huì)這樣呢？

搜一下相關(guān)內(nèi)容可以發(fā)現(xiàn)，setTimeout是使用Int32來(lái)存儲(chǔ)延時(shí)參數(shù)值的，也就是說(shuō)最大的延時(shí)值是2^31-1。一旦超過(guò)了最大值，其效果就跟延時(shí)值為0的情況一樣，也就是馬上執(zhí)行。

這個(gè)最大的延時(shí)值已經(jīng)接近一個(gè)月了，一般情況下，用戶也不會(huì)長(zhǎng)時(shí)間開(kāi)著一個(gè)網(wǎng)頁(yè)，如果真開(kāi)了這么久，那就刷新一下吧：

function update() {
 loadData().then(function(data) {
  $('#content').html(data.content);
  var delay = data.nextUpdateTime - new Date();
  if (delay > 0) {
   // 限制最大延時(shí)值為一天
   var ONE_DAY = 24 * 60 * 60 * 1000;
   if (delay > ONE_DAY) {
    setTimeout(function() {
     window.location.reload();
    }, ONE_DAY);
   } else {
    setTimeout(update, delay);
   }
  }
 });
}

同樣的問(wèn)題也存在于setInterval中。這也算是Javascript中一個(gè)比較隱蔽的坑了。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流。

您可能感興趣的文章: