使用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：spa

有时按下关闭按钮，也会执行onunloadcancel，而且有个对话框一闪而过。若是换成while(1);浏览器会一直卡死，这说明onunloadcancel确实是执行了，只是销毁了界面，但并无暂停脚本的运行。
若是是经过刷新页面的方式离开，仅执行一次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。code