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

Posted 2023-03-05

【中文标题】在每个 DOM 更改“完成”时触发 javascript 事件

【英文标题】：Firing javascript event on every DOM change "complete"

【发布时间】：2013-11-05 12:46:34

【问题描述】：

我知道这可以通过某种方式处理，但到目前为止，这让我很难过。我正在编写一个脚本，并希望在 DOM 操作完成后触发一些特定的功能。我无法修改/添加/删除任何其他脚本（因为它可能会使用某些框架注入到页面中）。该页面使用 ajax 请求（未在 jQuery 中实现）来加载/修改内容。现在我希望在每个 DOM 修改完成后触发一个事件。我目前的方法是在每个 DOMSubtreeModified 事件中触发该函数。像这样的

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

但是这种方法的缺点是，假设 ajax 在一次调用中加载 10 个元素，然后针对每个元素触发 doSomeStuff。这可以限制为仅在加载第 10 个元素后触发吗？类似于重置 $(document).ready() 事件？所以 $(document).ready() 每次 DOM 准备好时都会触发（在加载 ajax 内容之后）

【问题讨论】：

DOMSubtreeModified 已弃用 ***.com/questions/6659662/…，建议改用它 updates.html5rocks.com/2012/02/…

@Bernhard DOMSubtreeModified 仍然适用于 chrome，但突变观察者仍然如何告诉我文档是否再次准备好？

【参考方案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
);

【讨论】：

完全有效，但我不希望它在每次 dom 更改时启动。仅在 dom 更改完成时触发怎么样？...类似于 jQuery 中的 ajaxComplete 但没有 jQuery...听所有内容加载...

@whizzkid 没有所有圆顶更改完成的事件。此答案仅在完成/发生单个更改时才观看。因此，如果您需要一个侦听器来完成未知数量的更改，您必须创建一个计数器或其他东西，并在观察者回调中将计数器减少到 0。如果它是 0，那么您知道任何更改都已完成。但这不是一件好事，更好的面向回调的架构更合理。

可以重新初始化像 $(document).ready() 这样的东西在再次准备好时再次触发吗？

否，因为文档准备就绪与您尝试执行的操作完全不同。 javascript 处理大量事件而不是单个事件是有原因的

不要明确地将其视为“准备就绪”...假设当 dom 完成加载新内容时触发事件。

【参考方案2】：

在 jQuery 中，有一个方法 ajaxComplete，它在每次完成 AJAX 调用后调用给定的函数。查看更多here。

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

【讨论】：

我没有成功实现这一点。这是否只监听 jQuery ajax 请求？...因为所关注的页面没有使用 jQuery 的 ajax 函数。

文档说Now, make an Ajax request using any jQuery method 所以是的，我认为它只适用于 jQuery 请求。更深入地了解来源可能会有所帮助:)

如果你不使用 jQuery，不要指望事情会很容易；）看看 $.ajax source code，分析所有出现的 fireGlobals。触发 ajaxComplete 只是必须放入 AJAX 请求中的一行代码；）

假设我正在构建一个扩展，它无法控制页面如何加载内容。但我只想在 dom 完成加载请求时执行它。怎么样？

通过这种方式我非常成功。感谢您的回答。你应该得到更多的 +。

【参考方案3】：

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