仅在 DOM 操作完成后继续执行答案

【问题标题】：Continue execution only after DOM manipulation has completed仅在 DOM 操作完成后继续执行
【发布时间】：2016-05-30 20:33:48
【问题描述】：

document.getElementById('my_id').innerHTML = 'A message';
// Next should only be executed once DOM manipulation has completed
.. do some stuff

我见过这个jQuery/Javascript - How to wait for manipulated DOM to update before proceeding with function，它建议使用 setTimeOut。

document.getElementById('my_id').innerHTML = 'A message';
setTimeout(function(){
     .. do some stuff 
},10);

但是，这是一场比赛，我不喜欢。我需要确定，也不想浪费时间等待。其中一个 cmets 表示，即使 0ms 也可以工作，因为它会将其放入队列中，并保证仅在 DOM 操作完成后才执行。这是绝对肯定的吗？如果是这样，这个状态在哪里或经过测试？

（当然，操作可能比这个例子更复杂。插入的 HTML 甚至可能包含自己执行的 javascript。插入的 JS 执行不必完成，但渲染必须已经完成。）

【问题讨论】：

如果只是检测渲染阶段，只需要监听合适的事件。
什么活动？这不是初始加载，而是通过 JS 进行 DOM 操作。
请阅读我的回答：当您修改 DOM（添加节点、删除节点等）时，会触发一些事件。只要寻找你的并听它:-)
嗨，你解决了吗？

标签： javascript jquery

【解决方案1】：

您应该从其他操作的事件侦听器中触发其他事件。基本上你可以有这样的东西

$(".button").click(function(){
// perform your actuibs and do some interesting stuffs
$(".anotherButton").click()
})

$(".anotherButton").click(function(){
// the other actions that needs to be performed after the first button clicked
})

【讨论】：

【解决方案2】：

您可以使用旧版Web events 或新版Mutation observer。

每次操作 DOM 时都会触发一些事件，而不仅仅是加载事件。

在本例中，您插入的是 HTML，因此您至少需要监听 DOMNodeInserted 事件。

【讨论】：

链接到包含大量事件的大型网页并不能真正回答问题。
我将一大块 HTML（作为字符串）插入到另一个元素中。
只有一个疑问：您正在插入 字符串，对吗？但是作为子树还是仅仅作为该元素的属性？
链接说它已被弃用。我在做 (jquery): $("#my_id").html("
more html
");
正如我所说，我建议您使用 Mutation 观察者而不是 Web 事件。只是给你们两个我知道我们有的选择。