すべてのDOMの変更でjavascriptイベントが発生する「完了」

Question

これは何らかの方法で処理できることがわかっていますが、今のところこれは本当に苦労しています。私はスクリプトを書いていて、DOM操作が完了したときにいくつかの特定の機能を起動したい。他のスクリプトを変更/追加/削除することはできません（フレームワークを使用してページに挿入される可能性があります）。このページでは、コンテンツをロード/変更するためにajaxリクエスト（jQueryでは実装されていません）を使用しています。今度は、すべてのDOMの変更が完了したときにイベントがトリガーされるようにします。私の現在のアプローチは、すべてのDOMSubtreeModifiedイベントで関数を起動することです。この

$(document).bind('DOMSubtreeModified', doSomeStuff); 

のようなものしかし、このアプローチの欠点は、通話中に10の要素は、各要素のdoSomeStuffが解雇されたAJAX負荷にしましょう。これは、10番目の要素が読み込まれた後にのみ発射するように制限できますか？ $（document）.ready（）イベントをリセットするような何か？したがって、DOMが準備されるたびに（アフター・コンテンツをロードした後）$（document）.ready（）が呼び出されます。

Answer 1

jQueryには、完成したAJAX呼び出しごとに所定の関数を呼び出すメソッドajaxCompleteがあります。詳細hereを参照してください。

jQueryを使用することをお勧めします（これはオプションではない場合があります）。この関数のソースコードを分析して、そこでどのように処理されているかを確認してください。

Answer 2

Mutation Observerを使用すると、変更を監視することができ、イベントが発生するとドキュメントが変更されます。

MutationObserver = window.MutationObserver || window.WebKitMutationObserver; 

var observer = new MutationObserver(function(mutations, observer) { 
    // Add the actions to be done here if a changes on DOM happened 
    console.log(mutations, observer); 

}); 

// Register the element root you want to look for changes 
observer.observe(document, { 
    subtree: true, 
    attributes: true 
}); 

Answer 3

私は少し遅れて相手にだけど、あなたはdoSomeStuff機能をデバウンスすることができますように聞こえます。あなたがUnderscore.jsへの依存を導入することに反対しないなら、それは素晴らしいdebounce機能を持っています。