JQuery Trigger Ereignisse programmgesteuert und warten, bis die Aktion des vorherigen Ereignisses abgeschlossen ist, nächste

Question

Ich bin Anfänger zu jquery. Angenommen, ich habe eine Liste von 10 "a" -Tags, die alle an einen Event-Handler-Mouseover angehängt sind, klicken Sie auf, bzw. auf mouseout.
was ich tun möchte, ist über alle "a" -Elemente iterieren und diese Ereignisse mit jquery Trigger auslösen.
Das Problem, mit dem ich konfrontiert bin, ist, dass diese Ereignisse irgendwann ausgelöst werden, daher, wenn ich den Code ausführen, sehe ich die Ergebnisänderung nur auf das letzte Element. Und nicht die Zwischenprodukte.

$.each($("#styles a"), function(){ 
    console.log("picked up " + $(this)); 
    setTimeout(qwe($(this)), 2000); 
}); 

function qwe(obj) { 
    console.log(obj.attr("id")); 
    $.when(obj.trigger("mouseover").trigger("click").trigger("mouseout")) 
     .then(function() { 
      console.log("Changing Result Value" + $("#textTag").text()); 
     }); 
} 

Gibt es Art und Weise an die Kette diese Ereignisse sollten sequentiell das heißt
zweite Element der Ereignisse nur trigged werden, wenn die Trigger-Aktion der ersten Elemente abgeschlossen ist. Ich habe versucht, über SO zu suchen, aber die meisten Artikel drehen sich darum, nur einzelne Ereignisse auszulösen. Dank

Answer 1

erstellen $ .Deferred Objekte für jeden Teil der Kette, dann binden sie gelöst werden, wenn die Ereignisse tatsächlich ausgelöst werden:

callbacks = [$.Deferred(), $.Deferred(), $.Deferred()]; 
obj.on('mouseover', callbacks[0].resolve); 
obj.on('click', callbacks[1].resolve); 
obj.on('mouseout', callbacks[2].resolve); 
$.when(callbacks).done(function() { console.log('all three have fired'); }); 

Sie zusätzliche Logik brauchen würde, um sicherzustellen, dass der Auftrag ist beibehalten - vielleicht mit "ablehnen", wenn der Klick vor dem Mouseout nicht ausgelöst wird.