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

Posted 2023-02-23

【中文标题】window.setTimeout() 在 Safari 中的页面导航后停止

【英文标题】：window.setTimeout() stops after page navigation in Safari

【发布时间】：2018-11-06 17:15:08

【问题描述】：

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

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

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

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

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

【问题讨论】：

看起来 Safari 在请求开始时会卸载所有 JS，而不是在回复开始时卸载。除了在 iframe 中加载页面之外，AJAX 似乎是唯一的其他解决方法。跨度>

谢谢。由于 CSS 关键帧仍然有效，我想另一种方法是使用 CSS 动画来移动文本的位置以显示不同的消息，并更改进度条的宽度。

【参考方案1】：

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

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

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

【讨论】：

那东西是黄金 - transform 仍然有效 - 我需要这个来获得一些“加载下一页”反馈 - 终于解决了 IOS