Il debugger JS sospende l'intero ciclo degli eventi JS?

Question

Ho un comportamento molto strano in corso. Ho il seguente JQuery:

myElement.fadeOut(100); 

V'è una sorta di condizione di competizione in corso, in modo tale che l'elemento non finiscono per essere nascosto. Se metto un debugger su quella linea e passo attraverso il codice, funziona bene e l'elemento si attenua e viene nascosto. Chiamalo a Heisenbug.

La mia domanda non riguarda le condizioni di gara di per sé. Voglio sapere come è possibile che ciò accada data la natura del runtime di JavaScript. Dalla mia comprensione i seguenti predicati sono vere:

1. fadeOut() è implementato da JQuery animate()
2. animate() è implementato da una serie di setTimeout() chiamate
3. setTimeout() pianifica l'esecuzione di una funzione in una coda ad un certo punto nel tempo
4. Quando gli eventi raggiungono l'inizio della coda, la funzione viene eseguita.
5. C'è solo un ciclo di eventi, che viene eseguito in sequenza.
6. In qualsiasi momento, solo una funzione/percorso attraverso il callstack è in esecuzione.

Dato che sto passando una funzione nel mio debugger, l'esecuzione deve essere sospesa e nessun'altra funzione può essere eseguita.

Non riesco a vedere come sia possibile che una condizione di competizione si presenti in queste circostanze. Puoi suggerire come è possibile che l'esecuzione differisca tra codice debug e non debug?

Answer 1

I punti elenco sono corretti, tranne che requestAnimationFrame() viene utilizzato al posto di setTimeout() se il browser lo supporta.

una sessione di debug può avere un impatto sul comportamento del codice, se, per esempio, myElement viene creato in modo asincrono da una chiamata AJAX, ma fadeOut() si chiama senza attendere la richiesta di completare.

In tal caso, l'avanzamento manuale del codice può dare tempo sufficiente per la richiesta di restituzione e l'elemento da creare prima della chiamata a fadeOut(), mentre la richiesta non sarebbe stata ancora restituita nel caso normale.