javascript - 在Safari中浏览页面后，window.setTimeout()停止

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。