Monitoring DOM nodes have been loaded out (echart.init error)

Disclaimer: This article is a blogger original article, shall not be reproduced without the bloggers allowed. (Reproduced please indicate the source) https://blog.csdn.net/zhangjing0320/article/details/84992985

Reference: https://blog.csdn.net/yiifaa/article/details/75040858

A, echart.init error, error types are:

1. invalid dom
2. attribute is null (presumably mean)
3. t is null
4. e is null
5. height / width not defined (the specific error forgotten, probably means get less than the width and height)

二、 invalid dom：

1. init code into the window.onloadinside, there is no use being given.
2. I checked a lot of information there is that place $(document).ready(), or not.
3. html was also introduced vue (not Scaffolding), and then I mounted() {}write this.$nextTick(()=> { // 代码})also get less than a node, the node is actually empty.

PS: I think probably because I introduced vue and that he wrote a normal js files, resulting in 1 above error. 1 error could result in 2,3,4. 5 reported that the reason may be not set the width and height, set the width and height may be due to the wrong location code, please put the final surface all js code (if you introduce a vue js file, you should do so)

Third, resolve:

Then I went to exchange ideas on how to listen dom node has been loaded.
PS: If you introduce a vue of js files, it chart.init code in the end, otherwise it will report an error 5.

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

Why not while it? Because the browser is a single thread of execution, and the "while (! Dom)" has occupied the main thread, so dom never get the chance to load into the browser. The correct solution is to take advantage of the browser queue feature.

Conclusion: In HTML 5, there have been a better alternative - MutationObserver , based on event-triggered, high efficiency, the type of monitoring is not only more, but also easy to use