window.setTimeout() 在 Safari 中的页面导航后停止
Posted
技术标签:
【中文标题】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以上是关于window.setTimeout() 在 Safari 中的页面导航后停止的主要内容,如果未能解决你的问题,请参考以下文章
window.setTimeout和window.setInterval的区别,及用其中一个方法记录时间。
js定时器window.setTimeout和setInterval