Does setTimeout() work differently at different hours?

I am currently trying to get a repeating sound effect, which is getting slower over time with setTimeout() in sync with an animation. As soon as I get it in sync it will work and stay in sync for the time I am working on the program. But now when I was away for about 1 1/2 hours and run the program again exactly as I left it, the sound is no longer in sync with the animation. The same thing happend to me with the same program yesterday when I was away for some time and overnight.

So I was thinking that setTimeout() is somehow working with the current time and will work differently at different times. Can someone confirm this?

Here is my code for reference. The timeout function:

const timeoutRollSound = (time = 0, index = 0) => {
  setTimeout(() => {
      const audioClick = new Audio(
        "foo/bar.wav"
      );
      audioClick.play();
      index++;
      timeoutRollSound(0.05 * Math.pow(index, 2) + 3 * index - 50, index)
    }, time);
};

The animation:

$(".itemToAnimate").animate(
  { right: endpoint },
    {
      duration: 10000,
      easing: "easeOutQuint",
    }
);

Answer

I had this issue in Java years ago. Here’s what’s going on.

When you set a timeout (like you are doing) you are actually saying “I don’t want this function to execute before X milliseconds”. So the timeout function may be ready to run, but JavaScript or the browser might be doing something else.

setInterval might work better. But the other thing you can do is include the difference between when the code was eligible to be run and the time it was actually run at, like:

  setTimeout(() => {
      const audioClick = new Audio(
        "foo/bar.wav"
      );
      audioClick.play();
      index++;
      timeoutRollSound(0.05 * Math.pow(index, 2) + 3 * index - 50, index)
      timeoutRollSound.last = Date.now();

    },  time - ((Date.now - timeoutRollSound.last) );