JavaScript异步操作后DOM为空怎么办

? 核心错误：函数被立即执行，而非延迟调用

原始代码中这一行是关键缺陷：

.then(print())

此处 print() 带括号，表示立即调用该函数，并将它的返回值（undefined）传入 .then()。由于 print() 在 fetch 请求发起前就已执行，此时 #container 还未写入任何内容，自然输出空字符串。

✅ 正确做法是：向 .then() 传递一个函数引用（不带括号），使其在前一个 Promise 成功 resolve 后自动调用：

.then(print) // ✅ 正确：传入函数本身
// 或
.then(() => print()) // ✅ 正确：传入箭头函数，延迟执行

✅ 修正后的完整逻辑（含健壮性增强）

以下是重构后的专业级实现，兼顾可读性、健壮性与现代语法规范：

// 推荐：使用 document.readyState 检测，比 DOMContentLoaded 更稳妥（兼容已加载完成场景）
if (document.readyState === 'complete') {
  convertData();
} else {
  window.addEventListener('load', convertData); // 等待资源（含图片、脚本）全部加载完毕
}

function convertData() {
  fetch('info.json')
    .then(response => {
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      return response.json();
    })
    .then(showData)
    .then(print)
    .catch(error => console.error('数据处理失败:', error));
}

function showData(data) {
  const container = document.getElementById('container');
  if (!container) throw new Error('#container 元素未找到');

  // ✅ 避免多次 innerHTML +=（性能差且易引发 XSS）→ 收集后一次性写入
  const rows = data.data.map(obj => 
    `${obj.field1}; ${obj.field2}` // ✅ 使用点号访问属性，更简洁安全
  );
  container.innerHTML = rows.join('<br>');
}

function print() {
  const container = document.getElementById('container');
  console.log('当前容器内容：', container.innerHTML);
  // ✅ 此处可安全导出为 CSV，例如：
  // const csvContent = container.textContent.replace(/<br>/g, '\n').replace(/;/g, ',');
  // downloadCSV(csvContent);
}

⚠️ 关键注意事项与最佳实践

• 不要滥用 innerHTML +=：每次赋值都会触发 HTML 解析、DOM 重建和重排，性能极差；大数据量下可能导致卡顿。应先拼接字符串或使用 DocumentFragment。
• 变量声明升级：将 var i = 0 改为 let i = 0 或直接使用 for...of，避免作用域污染和闭包陷阱。
• 错误处理必须显式：.then() 不捕获同步异常（如 container 不存在），需在 showData 内部校验节点有效性。
• CSV 导出建议：innerHTML 包含 HTML 标签，导出 CSV 应基于原始数据或 textContent，再做格式清洗（如去除换行、转义逗号）。
• 现代替代方案：如需更高可控性，推荐用 insertAdjacentHTML('beforeend', ...) 或 appendChild() + document.createElement() 构建结构化内容。

? 小结：异步流程中，“何时执行”比“执行什么”更关键。牢记 .then(fn) 传函数引用、.then(fn()) 是立即执行——这是规避“读取为空”类问题的第一道防线。

到这里，我们也就讲完了《JavaScript异步操作后DOM为空怎么办》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！