如何等待document和window的readyState变为Complete后执行JS代码

你当前将JS文件放在head标签内引入，代码执行时DOM还未渲染完成，无法获取到按钮元素，因此绑定事件会失败，以下是满足需求的实现逻辑：

方式1：严格等待window和document就绪后执行 #

所有逻辑写在setUp.js中即可，无需修改原有HTML代码：

// 校验就绪状态
function checkReadyState() {
  // 只有document和window的readyState都为complete，即DOM、CSS、图片等所有页面资源全部加载完成后才执行绑定逻辑
  if (document.readyState === 'complete' && window.document.readyState === 'complete') {
    bindButtonEvent();
  } else {
    // 未就绪则监听状态变化事件，触发后重新校验
    document.addEventListener('readystatechange', checkReadyState);
    window.addEventListener('load', checkReadyState);
  }
}

// 按钮事件绑定逻辑
function bindButtonEvent() {
  const testBtn = document.getElementById('test');
  if (testBtn) {
    testBtn.addEventListener('click', () => {
      console.log('button clicked');
    });
  }
}

// 初始化执行校验
checkReadyState();

方式2：简化实现 #

如果不需要等待图片等非DOM资源加载完成，仅需等DOM解析完成即可绑定事件，可以直接修改HTML中JS引入的代码，给script标签添加defer属性：

<script src="scripts/setUp/setUp.js" defer></script>

此时setUp.js可以直接写绑定逻辑，无需额外监听就绪状态：

const testBtn = document.getElementById('test');
testBtn.addEventListener('click', () => {
  console.log('button clicked');
});

两种方案都可以实现点击test按钮后，控制台输出button clicked的效果。

内容的提问来源于stack exchange，提问作者Dark Revelations