如何监测DOM对象已加载完成

在第三方插件的使用过程中，我们经常需要DOM在加载完成后执行一些操作，如果插件提供了这样的事件接口，那一切都较为简单，但在大部分的情况下，要么是设计者没有考虑到这样的问题，或者没有设计这样的接口，那这时应该怎么办呢？

小组成员经常犯的一个错误是利用if判断，如下：

let dom = document.getElementById('yiifaa')//  dom加载完成后执行操作if(dom) {    //  执行dom加载完成后的操作，例如echart的初始化操作    echart.init('yiifaa')}

但是显然，上面的代码只能保证执行的操作不会出错，并不会保证操作一定会执行(dom没加载完成)，并且操作永远也得不到执行的机会。

也许你会说，为什么不采用while？如果真那样，那么恭喜你，你的程序死循环了，如下：

let dom = document.getElementById('yiifaa')//  dom没加载完成，一直循环判断while(!dom) {    continue;}//  执行dom加载完成后的操作，例如echart的初始化操作echart.init('yiifaa')

为什么呢？因为浏览器是单线程执行，而“while(!dom)”一直占着主线程，所以dom永远得不到机会加载到浏览器中。

正确的解决办法是充分利用浏览器的队列特性，如下：

//  声明定时器var timer = null//  检查dom是否执行完成function check() {    let dom = document.getElementById('yiifaa')    if(dom) {         //  执行dom加载完成后的操作，例如echart的初始化操作        echart.init('yiifaa')        //  清除定时器        if(!timer) {            clearTimeout(timer)        }    } else {        //  自我调用        timer = setTimeout(check, 0)    }}//  首次执行check()

结论

在HTML 5中，已经有更好的替代方案-MutationObserver，基于事件触发，效率高，监测的类型不仅多，而且易于使用。