window.setTimeout() 在 Safari 中的页面导航后停止 [英] window.setTimeout() stops after page navigation in Safari

问题描述

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

I have a page that takes 8-10 seconds to load, as the server makes an API call to an external service which crunches some big numbers. This is called after submitting a form.

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

Initially, I showed a CSS loading animation in an overlay to show the user the page is actually doing something.

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

I then augmented this by calling some code every 2 seconds with window.setTimeout(), updating a progress bar and showing a message saying what the system is doing. It's fake, of course, but it makes the time seem much shorter when there's 4-5 messages to read in 10 seconds.

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

My problem is the timeout isn't working in Safari (on MacOS or iOS). It works in all other browsers, including Chrome on the Mac. As soon as the form is submitted, all timers seem to be halted (it also affects the slideshow in the banner)

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

Has anyone encountered this, and know of a workaround? I don't really want to have to replace the standard form submission with an AJAX one as that would involve quite a bit of restructuring which we don't have budget for.

推荐答案

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

I know it's a very specific use case, but the I ended up using CSS animations (with keyframes) instead of setTimeout() to allow the animation to run after the navigation away has started.

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

I stumbled across the fact that most animated properties in Safari don't seem to work once the page request has started, but any "transform" ones do. Maybe this is a Safari bug, I'm not sure.

所以我用 translateY 代替了top"，用 scaleX 代替了 width.

So instead of "top" I used translateY, and instead of width I used scaleX.

这篇关于window.setTimeout() 在 Safari 中的页面导航后停止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！