setTimeout() 在不同时间的工作方式是否不同？

Question

我目前正在尝试获得重复的声音效果，随着时间的推移，随着 setTimeout() 与动画同步，声音效果会变慢。一旦我同步它，它就会工作并在我处理程序时保持同步。但是现在当我离开大约 1 1/2 小时并且运行程序又完全按照我离开时的样子重新播放时，声音不再与动画同步。昨天当我离开一段时间和过夜时，同样的事情发生在我身上。

所以我在想 setTimeout() 以某种方式与当前时间一起工作，并且在不同的时间会以不同的方式工作。有人可以确认吗？

这是我的代码供参考。超时函数：

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);
};

动画：

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

Answer 1

这让我想起了我在使用另一个 JS 库时遇到的一个问题，并且可能与之相关。如果将浏览器中的选项卡置于后台，将暂停执行。从我从你的代码中得到的信息来看，你依赖于递归 setTimeout 将不断运行的事实，这可能是你问题的根源。

这可能是您遇到的问题，请查看：Chrome: timeouts/interval suspended in background tabs?

Answer 2

我在 Java 年前遇到过这个问题。这是正在发生的事情。

当您设置超时（就像您正在做的那样）时，您实际上是在说“我不希望此函数在 X 毫秒之前执行”。因此超时函数可能已准备好运行，但 Java脚本或浏览器可能正在做其他事情。

setInterval 可能效果更好。但是您可以做的另一件事是包括代码符合条件运行和实际运行的时间之间的差异，例如：

  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) );

setTimeout() 在不同时间的工作方式是否不同？

Does setTimeout() work differently at different hours?

javascript

jquery

settimeout