Javascript “什么速度加快？”；“设置间隔”；当你切换页面时？

这是我的页面，这是一个测试移动元素的演示，但是在你改变页面后，回到这里，为什么DIV移动得更快

我的css：

   #box1 {
        width: 900px;
        height: 50px;
        background-color: #000;
        position: relative;
    }

    #box2 {
        width: 50px;
        height: 50px;
        background-color: #a00;
        position: absolute;
    }

我的HTML：

<div id="box1">
    <div id="box2"></div>
</div>

---

如果窗口未聚焦，一些浏览器不会触发超时/间隔事件。当窗口重新获得焦点时，它会同时触发所有窗口。这是一个性能决定（如果用户根本没有注意到，为什么每毫秒触发一个事件？），而且据我所知，没有办法改变这种行为

无法信任

setInterval

的速率。当选项卡未聚焦时，浏览器可能不会启动它，也可能启动的频率超过需要

在当前的HTML5草案中，这种行为是标准化的（这并不意味着它是这样实现的）。在这里，您可以找到注释：

此API不能保证计时器完全按计划运行。CPU负载、其他任务等导致的延迟是可以预料的

更明确的是：

9） （可选）等待另一个用户代理定义的时间长度

注意：这是为了允许用户代理根据需要填充超时，以优化设备的电源使用。例如，一些处理器具有低功耗模式，其中定时器的粒度减小；在这样的平台上，用户代理可以降低计时器的速度以适应此计划，而不需要处理器使用更精确的模式以及相关的更高的功耗

您可能还想看一下

---

如果在动画/时钟等中使用

setInterval

/

setTimeout

，请始终使用（例如，通过

Date.now（）

）测量实际经过的时间。

Mozilla Firefox和Google Chrome都会在选项卡处于非活动状态时限制间隔的计时速度（来源：，）

因此，正如建议的那样，捕获日期并对照刻度进行检查，以验证其是否正常工作，否则将补偿丢失的时间

JS:

---

JSFIDLE:

你说的“切换页面”是什么意思？来回航行？打开小提琴。单击其他选项卡/窗口，然后单击返回小提琴。有时它必须赶上。我曾经研究过一次这个话题，只需要在我看到你的答案时对他们进行c&p测试（结果是a+1）。但是，我从来没有注意到现实中的这种行为，所以很高兴知道它真的发生了

var box2 = document.getElementById("box2");
    var remove = setInterval(function () {
        box2.style.left = "0px";
        var move = setInterval(function () {
            var newLeft = Math.min(parseInt(box2.style.left) + 5, 850) + "px";
            box2.style.left = newLeft;
            if (newLeft == "850px") clearInterval(move)
        }, 20);
    }, 5000)

var tick = 20;
var newLeft=0;

var box2 = document.getElementById("box2");
var remove = setInterval(function() {
    box2.style.left = "0px";

 var now, before = new Date();
    var move = setInterval(function() {
        now = new Date();
        var elapsedTime = (now.getTime() - before.getTime());
        if (elapsedTime > tick) {
            console.log((Math.floor(elapsedTime / tick) * 5));
            newLeft = Math.min(parseInt(box2.style.left) + (Math.floor(elapsedTime / tick) * 5), 850) + "px";
        }
        else {
            newLeft = Math.min(parseInt(box2.style.left) + 5, 850) + "px";
        }
        box2.style.left = newLeft;
        before = new Date();
        if (newLeft == "850px"){clearInterval(move);}
    }, tick);

}, 5000);
​