Calling function every n second javascript game

Question

I making a game and I want to call a function that runs every random second to spawn something every time. I've seen some posts that said to use the setInterval() function to keep track of the time but I don't know where to implement it because I'm using the requestAnimationFrame() to loop the game. I also tried to implement it in the update function of the classes but it doesn't seem to work.

This is my main with the loop

import Game from '/src/game.js';

let canvas = document.getElementById('main');
let ctx = canvas.getContext('2d');

const WIDTH_SCREEN = 800;
const HEIGTH_SCREEN = 600;

let game = new Game(WIDTH_SCREEN, HEIGTH_SCREEN);   
game.start();

function loop() {
    ctx.clearRect(0, 0, WIDTH_SCREEN, HEIGTH_SCREEN);

    game.update(ctx);

    requestAnimationFrame(loop);
}

window.addEventListener("keydown", (event) => game.controller.keyListener(event));
window.addEventListener("keyup", (event) => game.controller.keyListener(event));
requestAnimationFrame(loop);

Answer 1

I don't know JavaScript, but why not implement something like this?

var lastCalled = 0;

function loop() {
  // do some staff
  if (((currentTimeMillis - lastCalled) / 1000) >= n) {
    // time to call your function
    // ...
    lastCalled = currentTimeMillis;
  }
}

But in this way your function might not be called exactly once per n seconds.

Answer 2

You can pass an optional time parameter to your window.requestAnimationFrame() callback (loop() in this case), and it will pass in the current amount of time (in milliseconds) since the first frame. You can create a timer object to take advantage of that:

const Timer = (event, interval = 0) => {
    let last = 0;
    let total = 0;
    return {
        set interval(newInterval)
        {
            interval = newInterval;
        },
        update(time = 0) {
            total += time - last;
            if (total >= interval) {
                event(this);
                total = 0;
            }
            last = time;
        }
    };
};

Now you can do this:

const fooLogger = Timer((timer) => {
    console.log('foo!');
    timer.interval = 1000 + Math.floor(Math.random()) * 1000;
}, 1500);
function loop(time) {
    requestAnimationFrame(loop);
    fooLogger.update(time);
}
requestAnimationFrame(loop);

And this should log "foo!" every 1 - 2 seconds. Update: The question specified a variable interval, that has been added.