为什么事件处理程序要等到触发代码完成执行？

Question

以下 sn-p 说明了我的问题。我有一些代码调用jQuery.trigger 处理customeventstart 事件，然后进行一些密集处理，然后再次调用jQuery.trigger 处理customeventstop 事件。

我希望customeventstart 的事件处理程序立即执行。但是，在控制台显示 customeventstart 处理程序的结果之前存在明显的延迟。似乎直到触发代码完成执行后才会调用事件处理程序。

注意：您可以根据机器的处理能力调整代码 sn-p 中循环的迭代次数，以延长/缩短延迟。

btn = $('#btn');

btn.on('click', function() {
  btn.trigger('customeventstart');
  
  // intensive/time-consuming processing
  for (var i = 0; i < 100000000; ++i) {
    'string' + 'concatenation'; 
  }
  console.log('intensive processing done');
  
  btn.trigger('customeventstop');
});

btn.on('customeventstart', function() {
  console.log('starting');
});

btn.on('customeventstop', function() {
  console.log('stopping');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">This may take a while</button>

我计划使用异步 Web Workers 解决方案，但我想更好地了解发生了什么。

为什么jQuery.triggered 事件的处理程序要等待或似乎要等到触发代码完成？

Answer 1

我认为这与 Firefox（和 Firebug）中的 console.log 实现有关，而不是事件的实际时间。

我尝试对您的 sn-p 进行以下修改，基本上只是添加了 Date.now 和一些控制台日志语句：

btn = $('#btn');

btn.on('click', function() {
  console.log(Date.now() + ': triggering customeventstart');
  btn.trigger('customeventstart');
  
  // intensive/time-consuming processing
  console.log(Date.now() + ': starting intensive processing');
  for (var i = 0; i < 100000000; ++i) {
    'string' + 'concatenation'; 
  }
  console.log(Date.now() + ': intensive processing done');
  
  console.log(Date.now() + ': triggering customeventstop');
  btn.trigger('customeventstop');
});

btn.on('customeventstart', function() {
  console.log(Date.now() + ': starting');
});

btn.on('customeventstop', function() {
  console.log(Date.now() + ': stopping');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">This may take a while</button>

对我来说：

• 在 Chrome 和 IE11 上，单击该按钮会导致前三个日志语句（通过“开始密集处理”）几乎即时记录，然后是延迟，然后是其余行。而顺序和时间是由线路上的时间戳来证明的。

• 在 Firefox 上，单击按钮会导致延迟，然后所有行一起出现 - 但如果您查看时间戳，很明显延迟实际上发生在“开始密集处理”和“密集处理”之间完成”日志语句，与 Chrome 和 IE11 一样（我必须在循环最大值中添加 0 才能在 Firefox 中看到这一点——哇，这些天这些东西速度很快）：

“1424713006530：触发 customeventstart” “1424713006530：开始” “1424713006531：开始强化处理” “1424713007263：密集处理完成” “1424713007263：触发customeventstop” “1424713007264：停止”

所以并不是事件在延迟后被触发，而是如果主 UI 线程很忙，Firefox 的 console.log 实现似乎被阻止了。

这与浏览器可能不会在主 UI 线程繁忙时更新页面显示的通常情况非常相似。例如，在下面的 sn-p 中，我们在进行密集处理时将按钮的背景变为红色（根本不使用任何自定义事件），然后在完成后将其恢复；但在大多数浏览器上，您根本看不到按钮的背景变化，即使在处理过程中有足够的时间：

btn = $('#btn');

btn.on('click', function() {
  console.log(Date.now() + ': turning button background red');
  btn.css('background-color', 'red');
  
  // intensive/time-consuming processing
  console.log(Date.now() + ': starting intensive processing');
  for (var i = 0; i < 100000000; ++i) {
    'string' + 'concatenation'; 
  }
  console.log(Date.now() + ': intensive processing done');
  
  console.log(Date.now() + ': restoring button background');
  btn.css('background-color', '');
});

(Look in the console.)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">This may take a while</button>