JS中setTimeout和setInterval的最大延時值詳解，setinterval延時

JS中setTimeout和setInterval的最大延時值詳解，setinterval延時

前言

JavaScript提供定時執行代碼的功能，叫做定時器（timer），主要由setTimeout()和setInterval()這兩個函數來完成。而這篇文中主要給大家介紹的是關於JS中setTimeout和setInterval最大延時值的相關問題，需要的朋友們下面來一起學習學習吧。

先來看這樣一段代碼：

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

其流程非常簡單：通過AJAX載入資料後更新HTML的內容；如果有指定下次更新時間，則通過計時器在該時間點再執行一次整個流程。

要說這段代碼有什麼隱患的話，那就是data.nextUpdateTime與目前時間的時間差（即delay變數的值）比較小的時候，會導致內容頻繁更新。但這是屬於正常的商務邏輯，要最佳化就只能犧牲內容更新的即時性。然而這裡我要說的是，當時間差非常大的時候，也會出現同樣的問題。

下面類比一下這個情境：

function log() { console.log('executed');}var nextUpdateTime = new Date();// 設為一個月後nextUpdateTime.setMonth(nextUpdateTime.getMonth() + 1);var delay = nextUpdateTime - new Date();setTimeout(log, delay);

這段代碼的原意是讓log函數在一個月後執行，但是運行一下就可以發現，該函數會馬上執行。為什麼會這樣呢？

搜一下相關內容可以發現，setTimeout是使用Int32來儲存延時參數值的，也就是說最大的延時值是2^31-1。一旦超過了最大值，其效果就跟延時值為0的情況一樣，也就是馬上執行。

這個最大的延時值已經接近一個月了，一般情況下，使用者也不會長時間開著一個網頁，如果真開了這麼久，那就重新整理一下吧：

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

同樣的問題也存在於setInterval中。這也算是Javascript中一個比較隱形坑了。

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的協助，如果有疑問大家可以留言交流。