javascript - DOMContentLoaded 有时有效，有时无效，而 setTimeout 通常总是有效

Question

DOMContentLoaded 有时有效，有时无效，而 setTimeout 通常总是有效。

例如，以下代码有效:

setTimeout( ()=>{
    let sites = ['mako.co.il'];
    let regex = /\..+/;
    let href = window.location.href;
    for (let i = 0; i < sites.length; i++) {
        if (href.includes(sites[i])) {
            let domain = sites[i].replace(regex, '');
            document.body.innerHTML =`
                <div style="direction: ltr; position: fixed; top: 0; z-index: 999999; display: block; width: 100%; height: 100%; background: red">
                  <p style="position: relative; top: 40%; display: block; font-size: 66px; font-weight: bold; color: #fff; margin: 0 auto; text-align: center">
                    Enough with this ${domain} bullshit!
                  </p>
                </div>
          `;
        }
    }
}, 1500);

但是如果改为 setTimeout( ()=>{...}, 1500); 我会使用 document.addEventListener('DOMContentLoaded', ()=>{... }); 不会的。

这是为什么呢？

在这两种情况下，我都会等待一定的时间，然后执行代码。加载完所有 DOM 树后，代码会失败，这可能是什么情况？

Answer 1

您的问题可能与某些嵌入式资源(例如图像)有时从浏览器缓存加载(快速)有关，有时从网络加载(缓慢)有关。

document 的 DOMContentLoaded 事件在文档可用之后、在加载图像等嵌入资源之前触发。

所以您可能只需要 window 的 load 事件:

window.addEventListener('load', function() {
    // This code runs after all resources including images are loaded.
}, false);