JS调试器是否会挂起整个JS事件循环？

Question

我有一些非常奇怪的行为.我有以下JQuery:

myElement.fadeOut(100);

存在某种竞争条件,因此该元素最终不会被隐藏.如果我在该行上放置一个调试器并逐步执行代码,它就可以正常运行并且元素会淡出并隐藏起来.称之为Heisenbug.

我的问题不是关于竞争条件本身.鉴于JavaScript运行时的性质,我想知道如何实现这一点.根据我的理解,以下谓词是正确的:

1. fadeOut()由JQuery animate()实现
2. animate()由一系列setTimeout()调用实现
3. setTimeout() 在某个时间点调度队列中函数的执行
4. 当事件到达队列的开始时,执行该功能.
5. 只有一个事件循环,它按顺序执行.
6. 在任何给定的时间点,只有一个函数/路径通过callstack正在执行.

鉴于我在调试器中单步执行某个函数,必须暂停执行,并且不能执行其他函数.

我无法看到在这种情况下如何出现竞争条件.您能否建议在调试和非调试代码之间执行的可能性如何？

Answer 1

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

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

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