问题
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.
Initially, I showed a CSS loading animation in an overlay to show the user the page is actually doing something.
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.
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)
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.
回答1:
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.
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.
So instead of "top" I used translateY, and instead of width I used scaleX.
来源：https://stackoverflow.com/questions/53176807/window-settimeout-stops-after-page-navigation-in-safari