Question

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);

然而，这是一场我不喜欢的比赛。我需要确定并且也不想浪费时间等待。其中一条评论指出，即使0ms也可以工作，因为它将它放入队列中并保证只在DOM操作完成后执行。这绝对肯定吗？如果是这样，这个州在哪里或经过测试？

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

Answer 1

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

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

在此示例中，您正在插入HTML，因此您至少需要收听DOMNodeInserted事件。

Answer 2

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

$(".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
})

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

2 个答案: