DOM操作が完了した後にのみ実行を続ける

Question

document.getElementById('my_id').innerHTML = 'A message'; 
// Next should only be executed once DOM manipulation has completed 
.. do some stuff 

これは、jQuery/Javascript - How to wait for manipulated DOM to update before proceeding with functionを見てきました。これはsetTimeOutを使用することを示しています。

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

しかし、これは私が好きではないレースです。私は確かにする必要があり、待っている時間を無駄にしたくない。コメントの1つは、それがキューに入れられ、DOM操作が完了した後にのみ実行されることが保証されているので、0msでも機能すると述べています。それは絶対に確かですか？もしそうなら、この状態はどこですか？

（この操作は、この例よりも複雑ですが、挿入されたHTMLには独自のjavascriptが含まれていることもあります）。

Answer 1

レガシーWeb eventsまたはそれより新しいMutation observerの両方を使用できます。

DOMを操作するたびに、ロードするイベントだけでなく、いくつかのイベントがトリガーされます。

この例ではHTMLを挿入しているため、少なくともDOMNodeInsertedイベントを受信する必要があります。

Answer 2

他のアクションのイベントリスナーから他のイベントをトリガーする必要があります。基本的にこのようなことができます

$(".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 
})