Question

我对javascript很新。我有一点问题，我已经看了这个问题，似乎setInterval在＆＃34;正常＆＃34;选项卡处于非活动状态时的速度这需要解决。

这是我的代码：

    window.onload = function(){

    function create() {
          $.ajax({
            url:"/includes/timer.php", //the page containing php script
           });
     }

    //Start first time
    var timez = <?php echo $server['newtime']; ?>;
    var realtimez = <?php echo time(); ?>;

    //Resetting
    function reset() {
    timez = <?php echo $server['newtime']; ?>;
    realtimez = <?php echo time(); ?>;
    }

    setInterval(function(){
        document.getElementById("timerz").innerHTML = timez - realtimez;
        realtimez++;

        if(realtimez > timez) {
            create();
            reset();
        }

        },1000);
}

由于我对javascript很新，我似乎无法找到一种方法来实现可以检查选项卡是否处于非活动状态的内容，然后将时间间隔加速到＆＃34; normal＆＃34;速度（1000毫秒）。

有人可以帮我正确地做这件事吗？

更新：正如我所提到的，我不能自己做。我已经尝试过很多次了。如果有人向我解释如何做到并尝试帮助我的代码，那么我将非常感激。

Answer 1

实际上，你不能。当选项卡不再处于活动状态时，其优先级会降低，这将影响JavaScript计时器的性能。

到目前为止，我已经看到的最佳解决方案是用以下方法替换默认的计时功能：https://github.com/turuslan/HackTimer

阅读文档，然后在源代码中包含脚本。

这个脚本的作用是用Web Workers替换默认的计时器函数（如setInterval）。

它们作为一个单独的进程独立运行，因此当它们的父选项卡处于非活动状态时，它们的优先级不高。

Answer 2

您最大的问题是var timez = <?php echo $server['newtime']; ?>; var realtimez = <?php echo time(); ?>; var startTime = new Date(); - 您无法保证即使您的标签处于有效状态，也会每1000ms 精确调用一次定时功能。

This fiddle measures the time between invocations，您可以看到它不能保证精确度，是的，当标签处于非活动状态时，它会变得更糟。

您的客户端（JS）代码中有服务器端（PHP）时间戳。这是一个好的开始。但是你需要在同一点抓住客户端时间，以供参考：

startTime

（不要忘记在reset功能中重置realtimez

然后代替递增setInterval(function(){ var elapsedSeconds = Math.round((new Date() - startTime) / 1000); document.getElementById("timerz").innerHTML = timez - (realtimez + elapsedSeconds); if(realtimez + elapsedSeconds > timez) { create(); reset(); } },1000);：

Dictionary<string,string>

选项卡处于非活动状态时，使此代码正常工作

2 个答案: