如何解决JavaScript竞态问题，确保JS函数在HTML元素加载完成后执行

场景适配说明 #

你遇到的问题本质是静态/动态插入的DOM元素和执行的JS逻辑时序不匹配，针对不同使用场景可以选择以下方案：

• 仅页面初始加载场景 #

  1. 直接将JS脚本放到</body>闭合标签之前，此时所有DOM已经解析完成，直接执行目标函数即可，不需要额外判断。
  2. 如果脚本必须放在<head>标签内，给<script>标签添加defer属性，或者监听DOMContentLoaded事件：

  document.addEventListener('DOMContentLoaded', () => {
    updateButtonSection();
  });
  

• 包含局部刷新/动态插入DOM的场景 #

  这是适配你遇到的刷新后旧元素未清除、新元素未加载就执行逻辑的最优方案，使用MutationObserver监听DOM变动，目标元素插入后立即触发回调，无多余等待也不会提前执行：

  // 初始化监听实例
  const buttonObserver = new MutationObserver((mutations, observer) => {
    const target = document.getElementById('buttonsection');
    if (target) {
      // 执行目标逻辑
      updateButtonSection();
      // 执行完成后断开监听释放资源
      observer.disconnect();
    }
  });
  
  // 启动监听，可替换为更小范围的父容器代替document.body提升性能
  buttonObserver.observe(document.body, {
    childList: true,
    subtree: true
  });
  

  如果希望继续使用轮询方案，可以将轮询间隔缩短到100ms减少等待延迟，同时在触发局部刷新时，先手动将暂存的旧元素引用置空，避免误判。

• 前端框架开发场景 #

  如果你使用Vue、React等前端框架开发，直接使用框架提供的DOM挂载完成生命周期钩子即可：

  • Vue 2/3：在mounted/onMounted钩子中执行目标函数
  • React：在useEffect空依赖回调中执行，或通过元素ref的挂载回调触发

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