使用setTimeout延時10ms執行onunloadcancel

在作Web開發時，咱們常常用到頁面關閉事件onbeforeunload，能夠給用戶一個選擇放棄關閉的機會，就好比這個博客編輯器。若是用戶選擇了離開，那麼onunload事件天然會觸發；但若用戶選擇了取消，又該如何檢測呢？

咱們假定一個頁面離開取消事件，叫作onunloadcancel。顯然，這個事件應觸發在用戶按下對話框的取消按鈕以後。但關閉提示對話框的觸發流程並非那麼簡單。咱們先來回顧下這個過程：

1	window.onbeforeunload = function()

2

{

3	return "真的離開?";

4

}

當用戶準備離開頁面（好比按下關閉按鈕，或者刷新頁面等等），onbeforeunload事件觸發。咱們的腳本沒法在這個事件裏決定是否阻止頁面的關閉，惟一能作到的只有返回一個字符串，這個字符串僅做爲說明文字出如今關閉選擇對話框裏，用戶能夠選擇關閉，或者不關閉。但究竟選擇哪一個，咱們無從得知。

然而仔細分析下這個問題，其實否則。 若是用戶真選擇了關閉頁面，那麼以後全部的運行代碼都byebye了；而繼續留在頁面的話，就當什麼都沒發生過，除了onbeforeunload事件。因此，咱們在onbeforeunload事件裏作點小花招，在此註冊個幾毫秒以後啓動的定時器，若是頁面真關閉了，那麼這個定時器固然是做廢了；那麼頁面還在，幾毫秒的延時對於這個原本就是異步的界面交互事件也沒有什麼偏差。

01	<script language="JavaScript">

02	window.onbeforeunload = function()

03

{

04	setTimeout(onunloadcancel, 10);

05	return "真的離開?";

06

}

07	window.onunloadcancel = function()

08

{

09	alert("取消離開");

10

}

11

</script>

咱們使用setTimeout，延時10ms執行onunloadcancel。若是頁面真關閉了，定時器固然都銷燬；反之繼續。但在測試中，發現FireFox有個兩個BUG：

1. 有時按下關閉按鈕，也會執行onunloadcancel，而且有個對話框一閃而過。若是換成while(1);瀏覽器會一直卡死，這說明onunloadcancel確實是執行了，只是銷燬了界面，但並無暫停腳本的運行。
2. 若是是經過刷新頁面的方式離開，僅執行一次onbeforeunload，但點擊X按鈕關閉頁面，會執行兩次onbeforeunload。所以咱們還需在完善下，以便兼容FF。

01	<script language="JavaScript">

02

var _t;

03	window.onbeforeunload = function()

04

{

05	setTimeout(function(){_t = setTimeout(onunloadcancel, 0)}, 0);

06	return "真的離開?";

07

}

08	window.onunloadcancel = function()

09

{

10	clearTimeout(_t);

11	alert("取消離開");

12

}

13

</script>

這裏使用了一種我也說不出緣由的辦法，應該算是hack，解決了FF下的bug。