beforeunload Javascript 的延迟答案

【问题标题】：Delay for beforeunload Javascriptbeforeunload Javascript 的延迟
【发布时间】：2018-02-05 03:07:43
【问题描述】：

我正在尝试向窗口 onbeforeunload 脚本添加延迟。我有一个 0.3 秒的 CSS 动画，在卸载页面之前需要 0.3 秒的延迟。可能吗？我的示例代码在这里；

window.onbeforeunload = function (event) {
    $('.page-loader').removeClass("page-loader--hidden").addClass("page-loader--fading-in");
};

【问题讨论】：

【解决方案1】：

What are the limitation using before unload event? 的回答解释说：

保证你的函数运行完成的唯一方法是确保你正在编写阻塞事件的同步代码

在这个特定示例中，将应用类，但 css 转换很可能不会显示，因为它们与 javascript 调用完全分离并且没有阻塞。

如果您希望显示动画，则很可能需要触发 javascript 函数，该函数在动画期间运行但不会停止 css 动画，或者将动画更改为 javascript 函数或代替图书馆。

我已经通过使用 jQuery 动画在许多网站上取得了成功。在您的情况下，它可能看起来类似于：

window.onbeforeunload = function(){
    $('.page-loader').removeClass("page-loader--hidden").hide().fadeIn(300);
};

【讨论】：

【解决方案2】：

好的，我注意到您可以在遍历锚链接或刷新/重新加载页面时复制所需的 CSS 动画。但是，您无法重复关闭浏览器选项卡的相同效果。我猜这有一些限制。

请参考：https://developer.mozilla.org/en-US/docs/Web/Events/unload。并且，关于 beforeunload 事件的链接。

【讨论】：