在每個DOM更改“完成”時觸發javascript事件

Question

我知道這可以通過某種方式處理，但截至目前，這給了我一個非常艱難的時刻。 我正在編寫一個腳本，並希望在DOM操作完成時觸發一些特定的函數。 我無法修改/添加/刪除任何其他腳本（因為它可能使用某些框架注入頁面）。 該頁面使用ajax請求（未在jQuery中實現）來加載/修改內容。 現在我希望在每個DOM修改完成后觸發一個事件。 我目前的方法是在每個DOMSubtreeModified事件中觸發該函數。 像這樣的東西

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

但是這種方法的缺點是，假設ajax在調用中加載了10個元素，然后為每個元素觸發doSomeStuff。 這可以限制為僅在加載第10個元素后觸發嗎？ 重置$（document）.ready（）事件之類的東西？ 每次DOM准備好時（加載ajax內容后）都會觸發$（document）.ready（）

Answer 1

使用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 2

在jQuery中，有一個方法ajaxComplete ，它在每次完成的AJAX調用之后調用給定的函數。 在這里查看更多。

我建議使用jQuery或（如果這不是一個選項）分析這個函數的源代碼，看看它是如何在那里完成的。

Answer 3

我知道我參加派對有點晚了，但聽起來你可能想要doSomeStuff你的doSomeStuff功能。 如果你不反對在Underscore.js上引入依賴，它有一個很好的去抖功能。