定时事件和requestAnimationFrame游戏循环

Question

I'm working on a game in JavaScript, and I have a game loop setup with requestAnimationFrame :

loop: function () {

    game.updateSomething();

    if (game.running) {
        game.tick++;
        requestAnimationFrame(game.loop);
    }
},

My game has a working loop and I am able to move objects around, that's all good, however if I want to limit an action inside this loop to every second for example, how can I achieve this? Do I have to take note of the time for every tick with new Date() , then compare it to the time I calculated on the previous loop generation, and test the difference? Like this:

latest: null,

loop: function () {

    var last = this.latest;
    this.latest = new Date().getTime();
    var every = 200;

    if (Math.floor(last/every) != Math.floor(this.latest/every)) {
        console.log('do something');
        game.updateSomething();
    };

    if (game.running) {
        game.tick++;
        requestAnimationFrame(game.loop);
    }
},

This seems really messy, even if I wrap this up in a function that returns true when the floored time is different on that tick, it just doesn't feel right... I tried googling but I couldn't find anything that addressed this specifically.

How do other JavaScript games handle something that needs to happen on a regular interval, that also resides in the main game loop?

Answer 1

From MDN :

The callback method is passed a single argument, a DOMHighResTimeStamp, which indicates the time, in miliseconds but with a minimal precision of 10 µs, at which the repaint is scheduled to occur.

The said time stamp could be used to measure time between raf calls, just what you need:

var last = sec = dev = 0,
    every = 1000;

var cycle = function (stamp) {
    if (stamp - last >= every - dev) {
        last = stamp;
        sec++;
        dev = last - sec * every;
        console.log(sec+" sec, deviation: " + dev);
    }
    requestAnimationFrame(cycle);
};

requestAnimationFrame(cycle);

Console output:

[13:09:55.790] "1 sec, deviation: 14"
[13:09:56.786] "2 sec, deviation: 12"
[13:09:57.782] "3 sec, deviation: 10"
[13:09:58.779] "4 sec, deviation: 9.000000000000455"
[13:09:59.777] "5 sec, deviation: 7"
[13:10:00.776] "6 sec, deviation: 6"
[13:10:01.773] "7 sec, deviation: 4"
[13:10:02.773] "8 sec, deviation: 3"
[13:10:03.773] "9 sec, deviation: 1"
[13:10:04.787] "10 sec, deviation: 15"
[13:10:05.786] "11 sec, deviation: 13"

Example fiddle .