javascript - 浏览器如何确定 setInterval 应该使用什么时间?

标签 javascript setinterval

一般情况下,浏览器似乎会在某些情况下修改 setInterval 使用的实际时间间隔,甚至超出最小限度。例如,我有以下代码:

function start() {
    window.setInterval(function() {
        update();
    }, 1);
}

lastTime = new Date;
numFrames = 0;
lastFrames = 0;

function update() {
    numFrames++;
    if (new Date - lastTime >= 1000) {
        lastFrames = numFrames;
        numFrames = 0;
        lastTime = new Date;
    }
}

此处,lastFrames 将为我们提供大约过去一秒的帧数。在 Chrome、Firefox 和 Safari 中使用时,此代码不会在一毫秒内运行。当然,每个浏览器在 setInterval 调用之间都有一个任意的最短时间,因此这是可以预料的。但是,随着页面继续运行,帧率将继续降低,即使选项卡仍处于焦点状态。我发现解决这个问题的唯一方法是让浏览器做一些事情。沿着这些路线的东西似乎让浏览器尽可能快地运行 setInterval:

function start() {
    window.setInterval(function() {
        update();
    }, 1);
}

lastTime = new Date;
numFrames = 0;
lastFrames = 0;

function update() {
    numFrames++;
    if (new Date - lastTime >= 1000) {
        lastFrames = numFrames;
        numFrames = 0;
        lastTime = new Date;
    }

    //doIntensiveLoop, processing, etc.
}

因此,我的问题是:浏览器在寻找什么来证明运行 setInterval 更接近我的要求?

编辑:HTML5 规范规定浏览器不应允许 setInterval 以低于 4 毫秒的间隔运行。

最佳答案

setIntervalsetTimeout 根本不准确,也不是为准确而设计的。 JavaScript 是单线程的,所以 setTimeout/setInterval 基本上是说“把这段代码放到运行队列中。当你到达它时,如果已经过了足够的时间,那么就执行它,否则就坚持下去它回到队列中,稍后再试”。

如果您将 setInterval 设置为 4 毫秒,但您的应用程序中的内容需要 10 毫秒才能运行,那么 setInterval 不可能以 4 毫秒运行,最多只能达到 10 毫秒的间隔。

如果这是用于动画/游戏目的,请给出 requestAnimationFrame一试。我不知道它是如何实现的,但它确实 promise 的一件事是更准确的计时。

关于javascript - 浏览器如何确定 setInterval 应该使用什么时间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11370522/

相关文章:

javascript - knockout : Cant access value of observable array using index

javascript - 类名未添加到 Div

reactjs - "setInterval"内的函数未从钩子(Hook)接收更新的变量

javascript - setInterval 的持续时间

切换到全屏时 Javascript/jQuery 变慢

javascript - 当前日期是自给定日期以来的 x 天吗?

javascript - 选择新评级值时如何删除先前选择的选项

javascript - 如何在jquery上的set Interval函数中添加 '' this''

javascript - this.moveImage 不是一个函数