在每个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上引入依赖，它有一个很好的去抖功能。