javascript - 为什么 'stay on page' 对话框暂停异步功能？

Question

所以这真的让我很烦，我不知道这是浏览器相关的故障还是 javascript 就是这样工作的(我希望是这样)。我创建了一个 fiddle 。 https://jsbin.com/laluziqede/1/edit?html,js,output

打开控制台，然后单击按钮。当对话框出现时，该功能将正常继续(第一个 console.log 不会暂停)，但是 setTimeout 函数内的那个会暂停，并且只会在您单击“停留在页面上”后显示。

但是为什么，有人可以解释一下吗？我想在我的应用程序中使用此属性(在用户单击“停留”后立即执行操作)，但我不确定这是否是一种好的做法以及它是否适用于所有浏览器和设备。

编辑:这是垃圾箱中的代码:

$(window).on('beforeunload', function() {

   return 'Check your console please and then click stay';

});


$('#click-me').on('click', function() {

    window.location.href='about:blank';

    console.log ('dialog won\'t stop me from showing');

    var timer=setTimeout(function() { 
        console.log('this was paused by the dialog');
    },0);

});

Answer 1

该行为取决于浏览器。我在 Firefox、Chrome、IE 和 Edge 中对其进行了测试，其中只有 Chrome 具有您描述的行为。

区别在于 beforeunload 事件的触发时间或处理时间。大多数浏览器在您更改 location 属性时立即触发事件并立即处理它。 Chrome 要么在导航实际即将发生时触发并处理事件，要么将事件放入队列并稍后像常规事件一样处理它。

在 Chrome 中，setTimeout 处理程序中的代码直到 beforeunload 事件被处理后才会发生，这要么是因为导航是在任何排队的事件之前处理的，要么是因为超时事件在队列中的卸载事件之后。