一般情况下,浏览器似乎会在某些情况下修改 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 毫秒的间隔运行。
最佳答案
setInterval
和 setTimeout
根本不准确,也不是为准确而设计的。 JavaScript 是单线程的,所以 setTimeout/setInterval
基本上是说“把这段代码放到运行队列中。当你到达它时,如果已经过了足够的时间,那么就执行它,否则就坚持下去它回到队列中,稍后再试”。
如果您将 setInterval 设置为 4 毫秒,但您的应用程序中的内容需要 10 毫秒才能运行,那么 setInterval 不可能以 4 毫秒运行,最多只能达到 10 毫秒的间隔。
如果这是用于动画/游戏目的,请给出 requestAnimationFrame一试。我不知道它是如何实现的,但它确实 promise 的一件事是更准确的计时。
关于javascript - 浏览器如何确定 setInterval 应该使用什么时间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11370522/