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调用后调用给定的函数。查看更多here。

我建议使用jQuery或（如果这不是一个选项）分析此函数的源代码，看看它是如何在那里完成的。

Answer 3

我知道我在聚会上有点迟了，但听起来你可能想要去除你的doSomeStuff功能。如果你不反对在Underscore.js上引入依赖，它有一个很好的debounce函数。

在每个DOM更改“完成”时触发javascript事件

3 个答案: