unerwartetes Verhalten mit jquery "auf" Ereignisse

Question

Das Setup:

handlerA & handlerB listen for event1, while handlerC listens for event2 

Die Ausführung:

1. event1 is sent (handlers A & B are listening) 
2. handlerA receives it, and along it's codepath sends event2 
3. handlerC receives event2 
4. handlerB receives event1 

Frage: Wenn die 'on' Ereignis soll asynchron sein, shouldn 't handlerB empfängt event1, bevor handlerC event2 empfängt? Kann mir das jemand erklären?

console.clear(); 
 

 
window.EventDispatcher = { 
 
    send: function(type, payload) { 
 
    $(EventDispatcher).trigger({ 
 
     type: type, 
 
     payload: payload 
 
    }); 
 
    } 
 
}; 
 

 
//---- SEND EVENT ---- 
 
$(function() { 
 
    $('#sendEventBtn').on('click', function() { 
 
    console.log('sending event1 to A and B...') 
 
    EventDispatcher.send('event1') 
 
    }) 
 
}) 
 

 
$(EventDispatcher).on('event1', handlerA); 
 
$(EventDispatcher).on('event1', handlerB); 
 
$(EventDispatcher).on('event2', handlerC); 
 

 
function handlerA() { 
 
    console.log('handlerA received event1'); 
 
    console.log('handlerA sending event2'); 
 
    EventDispatcher.send('event2') 
 
} 
 

 
function handlerB() { 
 
    console.log('handlerB received event1'); 
 
} 
 

 
function handlerC() { 
 
    console.log('handlerC received event2'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id='sendEventBtn'>Send Event</button>

Hier ist ein Plunker: http://plnkr.co/edit/Ux0kL3d5Hul8IopUXeRW?p=preview

Answer 1

Das Wort Sie suchen, ist "non-blocking" &, die nicht "unerwartet" Verhalten, wenn die event2 von handlerA gefeuert wird Zuerst würde dann offensichtlich Handler C es zuerst bekommen, es dreht sich alles um das Timing. Kurz gesagt, falls die JS-Maschine die Linie 4 erreicht hat, wenn der HandlerA bereits beendet ist, würde HandlerC das Ereignis empfangen.

function handlerA() { 
    console.log('handlerA received event1'); 
    console.log('handlerA sending event2'); 
    EventDispatcher.send('event2') 
} 

empfangenen event1 zu A und B ...

handlerA Senden event1

handlerA Senden event2

handlerC empfangen event2

handlerB event1 empfangen

Jetzt haben Sie etwas Verzögerung (lesen Sie mehr über setTimeout with 0) für Ereignis 2 & Sie würden sehen.

function handlerA() { 
    console.log('handlerA received event1'); 
    setTimeout(function(){ 
     console.log('handlerA sending event2'); 
     EventDispatcher.send('event2');   
    }, 0); 
} 

event1 zu A und B ...

handlerA empfangen event1

handlerB empfangen event1

handlerA Senden event2

handlerC empfangen event2

Senden