Javascript 永远循环并提供增量时间

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/13996267/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 15:22:28  来源:igfitidea点击:

Loop forever and provide delta time

javascripthtmlloopstimedelta

提问by David Gomes

I'm writing an HTML5 Game Development Javascript framework and I want to provide the user the difference in time between the last tick and the current one.

我正在编写一个 HTML5 游戏开发 Javascript 框架,我想为用户提供最后一个刻度和当前刻度之间的时间差。

setInterval(tick, 16.6666666);

function tick() {
  update();
  draw();
}

That's what I have, but I want to have:

这就是我所拥有的,但我想拥有:

while (true) {
  /* Calculate delta time */

  tick(dt);
}

function tick(dt) {
  update(dt);
  draw();
}

I tried that, using date.getTime(); to calculate delta time, but Firefox said the script crashed. Obviously, an infinite loop will crash. Got any suggestions for how I can go about this?

我试过了,使用 date.getTime(); 计算增量时间,但 Firefox 说脚本崩溃了。显然,无限循环会崩溃。对我如何解决这个问题有什么建议吗?

I want an infinite loop, that can be stopped with break. I want to pass delta time too, but that I know how to do.

我想要一个无限循环,可以用break. 我也想传递增量时间,但我知道该怎么做。

回答by Rikonator

Just maintain a variable with the time of the last update, and calculate the elapsed time/delta time in tickitself.

只需用上次更新的时间维护一个变量,并tick自行计算经过时间/增量时间。

var lastUpdate = Date.now();
var myInterval = setInterval(tick, 0);

function tick() {
    var now = Date.now();
    var dt = now - lastUpdate;
    lastUpdate = now;

    update(dt);
    render(dt);
}

Here's a JSBin, though I don't think it's really needed... http://jsbin.com/okimam/10

这是一个 JSBin,虽然我不认为它真的需要...... http://jsbin.com/okimam/10

EDIT: I must point out that setInterval(tick, 0)does not necessarily mean that tickwill be called immediately, with an interval of '0ms' between two calls. It depends on the browser.

编辑:我必须指出,这setInterval(tick, 0)并不一定意味着tick会立即调用,两次调用之间的间隔为“0ms”。这取决于浏览器。

回答by Chris Buck

This is what I use:

这是我使用的:

var lastTick = performance.now()

function tick(nowish) {
  var delta = nowish - lastTick
  lastTick = nowish

  update(delta)
  render(delta)

  window.requestAnimationFrame(tick)
}

window.requestAnimationFrame(tick)

回答by Lealcy Tardelli Belegante

Would like to give my two cents. Usually I use this deltatime method in my games:

想给我的两分钱。通常我在我的游戏中使用这个 deltatime 方法:

const perfectFrameTime = 1000 / 60;
let deltaTime = 0;
let lastTimestamp = 0;

function start() {
    requestAnimationFrame(update);
}

function update(timestamp) {
    requestAnimationFrame(update);
    deltaTime = (timestamp - lastTimestamp) / perfectFrameTime;
    lastTimestamp = timestamp;

    // YOUR FRAME CODE HERE!

}

start();

This ensure you will have perfect deltatime (as like Unity deltaTime) so you can scale your times to frame time.

这确保您将拥有完美的 deltatime(就像 Unity deltaTime 一样),以便您可以将时间扩展到帧时间。

回答by epascarello

Are you over thinking it?

你想多了?

var myInterval = window.setInterval(calculateForDeltaHere , 20);

function calculateForDeltaHere () {
    /* Calculate delta time */
    dt = Math.random();
    tick(dt);
}

function tick() {  
  update();
  draw();
}

And when you want to stop the interval

当你想停止间隔时

window.clearInterval(myInterval);