javascript 我可以在卸载之前放入什么？

what can i put in beforeUnload?

提问by jorrebor

I would like to have an animation effect which starts when people leave a page.

我想要一个动画效果，当人们离开页面时开始。

I use this currently:

我目前使用这个：

window.onbeforeunload = function (){
    alert("test");
    console.log("test");
    sliderIntervalId = setInterval('SlideDown()',1);
}

While the "test" is indeed logged to the console, the neither the function slideDown nor the test alert is produced...

虽然“测试”确实记录到了控制台，但函数 slideDown 和测试警报都没有产生......

Is this normal behavior? can we use the beforeunload function only for backend purposes?

这是正常行为吗？我们可以将 beforeunload 函数仅用于后端目的吗？

P.S. I'm testing on chrome, that's why I had to use onbeforeUnload i.s.o onUnLoad which seems not to be supported by Chrome?

PS 我正在 chrome 上测试，这就是为什么我必须使用 onbeforeUnload iso onUnLoad 似乎不受 Chrome 支持？

回答by Rob W

onbeforeunloadcan delay the page unload in only onecase: When a returnstatement with a defined value is returned. In this case, the user gets a confirmation dialog, which offers the user an option to not leave the page.

onbeforeunload只能在一种情况下延迟页面卸载：return返回具有定义值的语句时。在这种情况下，用户会收到一个确认对话框，该对话框为用户提供不离开页面的选项。

Your desired result cannot be forced in any way. Your animation will run until the browser starts loading the next page:

不能以任何方式强迫您想要的结果。您的动画将一直运行，直到浏览器开始加载下一页：

[User] Navigates away to http://other.website/
[Your page] Fires `beforeunload` event
[Your page] `unload` event fires
[Browser] Received response from http://other.website/
[Browser] Leaves your page
[Browser] Starts showing content from http://other.website/

回答by fregante

Assuming jQuery for the sake of brevity:

为简洁起见，假设 jQuery：

$('nav a').click(function (e) {

    //ignore any "modified" click that usually doesn't open in the current window
    if (e.which > 1 || e.shiftKey || e.altKey || e.metaKey || e.isDefaultPrevented()) {
        return;
    }

    //where you going here?
    var place = this.href;

    //you're not going anywhere, buddy
    e.preventDefault();

    //watch me dance, first
    $('.animate-me').fadeOut(1000, function afterAnimation () {

        //you're free to go!
        document.location = place;
    });
});

Basically, you don't use onbeforeunload. One advantage is that you can keep the user as long as you want, one disadvantage is that the user won't see an animation when using a link outside nav(but you can just change the selector)

基本上，您不使用onbeforeunload. 一个优点是您可以根据需要保留用户，一个缺点是用户在使用外部链接时不会看到动画nav（但您可以更改选择器）

Obviously keep the animation fast, like suddenlyoslo.comdo.

显然要保持动画速度快，就像突然之间做的那样。

回答by Marlin

Jorrebor, If your trying to have this animation fire when they leave your site or close the browser it will not work as intended. However, you can create this animation while the user travels within your site by removing the 'href' property of your links and creating animations that have a callback function that set the window.location property. Something like:

Jorrebor，如果您试图在他们离开您的网站或关闭浏览器时触发此动画，它将无法按预期工作。但是，您可以通过删除链接的“href”属性并创建具有设置 window.location 属性的回调函数的动画，在用户在您的站点内移动时创建此动画。就像是：

document.getElementById('home').onclick(function(){
     yourAnimationFunction(function(){
          window.location="example.com";
     });  
});

alot of work and wont be seo friendly however

很多工作，但不会对 seo 友好

回答by naugtur

I am working with onbeforeunload and What I was able to figure out is:

我正在使用 onbeforeunload 并且我能够弄清楚的是：

• onbeforeunload handler is blocking the browser from destroying the current page
• if you don't return anything, the popup does not appear.

• onbeforeunload 处理程序阻止浏览器破坏当前页面
• 如果您不返回任何内容，则不会出现弹出窗口。

So your code will be working as long as the event handler runs. This means that timer functions are not usable. They just add to the execution queue, so anything they would do is being queued afterthe end of currently running handler, which is after the last point in time you were guaranteed your code is still running.

因此，只要事件处理程序运行，您的代码就会工作。这意味着定时器功能不可用。它们只是添加到执行队列中，因此它们所做的任何事情都会在当前运行的处理程序结束之后排队，这是在您保证代码仍在运行的最后一个时间点之后。

So there is only one way to stop the browser from unloading before the animation finishes:

所以只有一种方法可以在动画完成之前阻止浏览器卸载：

• put a blocking loop that wastes some time in the beforeunloadhandler
• start CSS3 animation by setting an appropriate class on the element before the loop
• make the loop end when the animation finishes (make the loop check the actual height of an element or something)

• 在beforeunload处理程序中放置一个会浪费一些时间的阻塞循环
• 通过在循环之前在元素上设置适当的类来启动 CSS3 动画
• 动画完成时使循环结束（使循环检查元素的实际高度或其他东西）

Oh, and yes, this is a nastiest hack of all, but I was able to find a way to stop the browser from unloading the page, right?

哦，是的，这是最糟糕的 hack，但我能够找到一种方法来阻止浏览器卸载页面，对吗？

I would appreciate comments with ideas on what to put in the loop. I am taking some options into account:

我将不胜感激有关将什么放入循环的想法的评论。我正在考虑一些选择：

• wasting CPU on come math on large numbers
• accessing localstorage (synchronous call, IO operration)
• accessing DOM (this solution already has to)

• 在大量数学上浪费 CPU
• 访问localstorage（同步调用，IO操作）
• 访问 DOM（这个解决方案已经需要）

Any ideas?

有任何想法吗？