如何检测innerHTML何时完成

Question

我已经做了很多寻找这个问题的解决方案，但到目前为止还没有找到一个可以跨浏览器工作的解决方案。

我需要的是一个原始的javascript函数，一旦innerHTML成功插入到dom中，它将接受一个元素并运行回调。

例如

    var element = document.getElementById('example');
        element.innerHTML = newhtml;

    waitUntilReady(element, function(){
            //do stuff here...
    });

总而言之，我需要能够检查元素的内容并在innerHTML完成时触发回调。

预先感谢您的帮助。

Answer 1

不需要这样的功能。分配给

innerHTML

将在继续运行任何脚本之前立即执行此操作。

如果您确实需要延迟执行（比如允许浏览器重绘），请使用

setTimeout

并延迟

1

（或其他较短的间隔）。

Answer 2

对于需要等待设置

innerHTML

（或任何其他 HTML 属性，例如大内联图像的

src

）的副作用准备就绪的情况，这是一个很好的解决方法：

let element = document.getElementById('example');
element.innerHTML = newhtml;
await new Promise(resolve => setTimeout(resolve, 0)); // Wait until ready
// Do stuff here that depends on side effects of setting newhtml