Ausführung nur fortsetzen, nachdem die DOM-Manipulation abgeschlossen wurde

Question

Ich habe diese jQuery/Javascript - How to wait for manipulated DOM to update before proceeding with function gesehen, die die Verwendung von setTimeOut vorschlägt.

document.getElementById('my_id').innerHTML = 'A message'; 
setTimeout(function(){ 
    .. do some stuff 
},10); 

Allerdings ist dies ein Rennen, das ich nicht mag. Ich muss sicher sein und auch nicht warten wollen. Einer der Kommentare besagt, dass auch 0ms funktioniert, da es in eine Warteschlange gestellt wird und garantiert nur ausgeführt wird, nachdem die DOM-Manipulation abgeschlossen ist. Ist das absolut sicher? Wenn ja, wo ist dieser Zustand oder getestet?

(Die Manipulation kann natürlich komplizierter sein als dieses Beispiel. Das eingefügte HTML kann sogar sein eigenes Javascript enthalten, das ausgeführt wird. Die eingefügte JS-Ausführung muss nicht abgeschlossen sein, aber das Rendering muss abgeschlossen sein.)

Answer 1

Sie können sowohl das Legacy Web events als auch das neuere Mutation observer verwenden.

Jedes Mal, wenn Sie das DOM manipulieren, werden einige Ereignisse ausgelöst, nicht nur das Laden.

In diesem Beispiel fügen Sie HTML ein, so dass Sie mindestens DOMNodeInserted Ereignis hören müssen.

Answer 2

Sie sollten das andere Ereignis von den Ereignislistenern für die anderen Aktionen auslösen. Grundsätzlich kann man so etwas haben

$(".button").click(function(){ 
// perform your actuibs and do some interesting stuffs 
$(".anotherButton").click() 
}) 

$(".anotherButton").click(function(){ 
// the other actions that needs to be performed after the first button clicked 
})