Geek asks and answers

JS debugging pauses the entire JS event loop?

I have a very strange behavior. I have the following jQuery:

myElement.fadeOut(100);

There is some kind of race condition, so the element does not become hidden. If I put the debugger on this line and go through the code, it works fine and the item disappears and hides. Call it Heisenbug .

My question is not about the state of the race as such . I want to know how this is possible for this, given the nature of the JavaScript runtime. In my opinion, the following predicates are true:

  • fadeOut () is implemented using jQuery animate ()
  • animate () is implemented by a series of calls setTimeout()
  • setTimeout() assigns the execution of a function to the queue at some point in time
  • When events reach the beginning of the queue, the function is executed.
  • There is only one event loop that runs sequentially.
  • At any given time, only one function / path through the column is executed.

Given that I am executing a function in my debugger, execution should be paused and no other functions can be executed.

I do not see how it is possible for the race condition to arise in these conditions. Can you suggest how it is possible for execution to differ from debugged and not debugged code?

+5
source share
1 answer

Your markers are correct, except that requestAnimationFrame () is used instead setTimeout()if the browser supports it.

, , , myElement AJAX, fadeOut() .

, fadeOut(), .

+2

More articles:


All Articles