window.setTimeout() 在 Safari 中的页面导航后停止

Question

我有一个页面需要 8 到 10 秒才能加载，因为服务器对外部服务进行 API 调用，从而处理一些大数字。这在提交表单后调用。

最初，我在叠加层中展示了一个 CSS 加载动画，以向用户展示页面实际上在做什么。

然后我通过使用 window.setTimeout() 每 2 秒调用一些代码来增强它，更新进度条并显示一条消息，说明系统正在做什么。这当然是假的，但是当 10 秒内要阅读 4-5 条消息时，它使时间看起来要短得多。

我的问题是超时在 Safari（MacOS 或 iOS 上）中不起作用。它适用于所有其他浏览器，包括 Mac 上的 Chrome。提交表单后，所有计时器似乎都停止了（它也会影响横幅中的幻灯片）

有没有人遇到过这种情况并知道解决方法？我真的不想用 AJAX 替换标准表单提交，因为这会涉及到我们没有预算的相当多的重组。

Answer 1

我知道这是一个非常具体的用例，但我最终使用 CSS 动画（带有关键帧）而不是 setTimeout() 来允许动画在导航开始后运行。

我偶然发现，一旦页面请求开始，Safari 中的大多数动画属性似乎都不起作用，但任何“转换”属性都可以。也许这是一个 Safari 错误，我不确定。

所以我用 translateY 代替了“top”，用 scaleX 代替了 width。