javascript - JS 调试器是否暂停整个 JS 事件循环？

Question

我有一些非常奇怪的行为。我有以下 JQuery：

myElement.fadeOut(100);

存在某种竞争条件，因此元素最终不会被隐藏。如果我在该行上放置一个调试器并单步执行代码，它工作正常并且元素淡出并被隐藏。称它为Heisenbug 。

我的问题不是关于比赛条件本身。我想知道考虑到 JavaScript 运行时的性质，这怎么可能发生。据我了解，以下谓词是正确的：

1. fadeOut() 由 JQuery animate() 实现
2. animate() 由一系列setTimeout()调用实现
3. setTimeout()安排在某个时间点执行队列中的函数
4. 当事件到达队列的开头时，函数被执行。
5. 只有一个事件循环，按顺序执行。
6. 在任何给定的时间点，只有一个通过调用堆栈的函数/路径正在执行。

鉴于我正在调试器中单步执行一个函数，因此必须暂停执行，并且不能执行其他函数。

我看不出在这种情况下怎么可能出现竞争条件。您能否建议在调试代码和非调试代码之间的执行有什么不同？

Answer 1

您的要点是正确的，除了使用requestAnimationFrame()而不是setTimeout()浏览器是否支持它。

myElement例如，如果调试会话由 AJAX 调用异步创建，但fadeOut()在不等待请求完成的情况下被调用，则调试会话可能会对代码的行为产生影响。

在这种情况下，手动单步执行代码可以为请求返回和调用之前创建的元素提供足够的时间fadeOut()，而在正常情况下请求不会返回。