JavaScript递归setTimeout()几个小时后不能正常工作

Question

在我的web应用程序中，我每秒钟使用递归setTimeout()调用一个函数(见下文)。

function test() {
    console.log('test');
    setTimeout(test, 1000);
}

test();

它运行良好，但在大约6个小时后，它只每3秒左右调用test()函数。(setInterval()也有同样的问题)

该程序需要一天24小时运行，并且必须每秒钟更新一次。有什么办法解决这个问题吗。

以下是完整的代码：

function updateDateTime() {
    var now = new Date();
    
    /* Date */
    var woy = moment(now).format('W');
    var dow = now.getDay();
    var d = now.getDate();
    var m = now.getMonth();
    var y = now.getFullYear();
    document.getElementById('date_day').innerHTML = daysOfWeek[dow];
    document.getElementById('date').innerHTML = d + ". " + monthsOfYear[m] + " " + y;
    document.getElementById('date_week').innerHTML = "KW " + woy;

    /* Time */
    var h = now.getHours();
    var m = now.getMinutes();
    var s = now.getSeconds();
    m = checkTime(m);
    s = checkTime(s);
    
    /*if(odd)*/
        $("#time_colon").css('visibility', 'visible');
    /*else
        $("#time_colon").css('visibility', 'hidden');
    odd = !odd;*/
    
    document.getElementById('time_h').innerHTML = h;
    document.getElementById('time_m').innerHTML = m;
    document.getElementById('time_s').innerHTML = s;
    
    /* Clock */
    drawClock(now);
    
    setTimeout(updateDateTime, 1000 - moment().milliseconds() + 50);
}

function checkTime(i) {
  if (i < 10) {i = "0" + i};
  return i;
}

还有一些其他函数应该每15分钟更新一次Ajax请求，如下所示：

function updateNews() {
    var xmlhttp = new XMLHttpRequest();
    var url = "newsapi";
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById('news').innerHTML = '';
            var news = JSON.parse(this.responseText);
            for(e in news){
                data = news[e];
                document.getElementById('news').innerHTML += '<span class="mx-3">'+data.title+'</span>';
                if(e < news.length) {
                    document.getElementById('news').innerHTML += ' &middot; ';
                }
            }
        }
    };
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
    
    setTimeout(updateNews, 1800*1000);
}

我还使用代码来禁用铬浏览器的屏幕休眠模式：

if ('wakeLock' in navigator) {
    // Screen Wake Lock API supported 
    // The wake lock sentinel.
    let wakeLock = null;
    
    // Function that attempts to request a screen wake lock.
    const requestWakeLock = async () => {
        try {
            wakeLock = await navigator.wakeLock.request();
            wakeLock.addEventListener('release', () => {
                console.log('Screen Wake Lock released:', wakeLock.released);
            });
            console.log('Screen Wake Lock released:', wakeLock.released);
        } catch (err) {
            console.error(`${err.name}, ${err.message}`);
        }
    };
    
    // Request a screen wake lock…
    requestWakeLock();
}

如果你需要更多的信息，只需写一个评论。

新更新：今天早上看到，由于服务器崩溃，新闻数据没有更新，但在12个小时左右之后，时间仍然正确。但4个小时后，在我重新启动我的服务器和时钟后，时间被抵消了2秒。因此，我猜setTimeout的偏移量取决于其他超时中的Ajax请求。

以下是我的研究结果：

\x{e76f}\

分钟().milliseconds()+ 50 \ raspi \2秒大约4-6小时后，{##**$$}}铬和火狐

().milliseconds()+ 50 \ raspi \没有偏移，但没有工作的ajax请求

在大约4-6个小时后大约2秒钟

在大约4-6个小时后大约2秒钟

Answer 1

我解决了问题。

您只需要在Ajax请求完成后调用setTimeout()事件。