2017-06-24 20 views
1

MutationObserverの観測インスタンスで、コードに起因するDOMの変更を無視するにはどうすればよいですか?例えば (jQueryを使って):MutationObserver:DOMアクションを無視する

//initialize MutationObserver 
var mo = new MutationObserver(mutations => console.log(mutations)); 
mo.observe(document.body, {attributes: true, subtree: true, characterData: true, attributeOldValue: true, characterDataOldValue: true, childList: true}); 

//case 1: perform a removal 
$('.someDiv').remove(); 
//in this case an action is logged by MO 

//case 2: perform a removal with a disconnected MO 
mo.disconnect(); 
$('.someDiv').remove(); 
mo.observe(document.body, {...}); 
//in this case an action is logged again! 

どちらの場合も、MOは、私はDOMに行ったすべての変更をログに記録します。

//case 3: perform a removal with a disconnected MO, turning on after a timeout 
mo.disconnect(); 
$('.someDiv').remove(); 
setTimeout(() => mo.observe(document.body, {...}), 500); //pseudo 
//in this case MO skips an action above 

しかし、そこにタイムアウト中にユーザーがページ上で発生するいくつかの他のアクションすることができ、またはMutationObserverのコールバックができるため、それは、その問題の最善の解決策ではありません。私が思いついた唯一の方法がありますタイムアウトより後のある時間で呼び出されます。

答えて

2

MutationObserverのコールバックは非同期的に呼び出されるため、現在実行されているコードの変更は蓄積され、終了時にのみ送信されます。
これはJavaScript event loopの仕組みです。

あなたが切断し、同じイベントに再接続する場合は、あなたが明示的にキューを枯渇する必要があります。

mo.disconnect(); 
mo.takeRecords(); // deplete the queue 

.............. 

mo.observe(......); 
関連する問題