本文详解为何在 `promise.then()` 中误写 `print()` 会导致 dom 内容未更新就执行读取操作，并提供零延迟、可靠触发的解决方案，同时优化 dom 操作与代码规范。

在使用 fetch + Promise 链动态更新页面内容后立即读取 DOM 的场景中，一个常见却隐蔽的错误是：在 .then() 中错误地调用了函数而非传入函数引用。这会导致 print() 在请求发起前就被执行，此时

? 根本原因：函数调用 vs 函数引用

原代码中这一行是关键错误：

.then(print())

它等价于：

• 立即执行 print()（此时 showData() 尚未运行，DOM 未更新）；
• 将 print() 的返回值（undefined）作为参数传给 .then()；
• 因此 .then(undefined) 实际上不会触发任何操作，或导致静默失败。

✅ 正确做法是传递函数本身（不带括号），让 Promise 在前一步 resolve 后自动调用它：

.then(print)        // ✅ 正确：传入函数引用
// 或
.then(() => print()) // ✅ 正确：传入箭头函数（可带参数/逻辑）

✅ 完整修复后的代码（含最佳实践）

// 更健壮的加载检测：兼容同步/异步执行时机
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(data => showData(data))
    .then(print) // ← 关键修正：无括号！
    .catch(error => console.error('数据处理失败:', error));
}

function showData(data) {
  const container = document.getElementById('container');

  // ✅ 使用 let 替代 var，避免变量提升和作用域陷阱
  // ✅ 使用点号访问属性（field1/field2 是合法标识符）
  // ✅ 避免反复修改 innerHTML（性能差且会销毁事件监听器），推荐构建字符串后一次性赋值
  let html = '';
  for (let i = 0; i < data.data.length; i++) {
    const obj = data.data[i];
    html += `
${obj.field1}; ${obj.field2};`;
  }
  container.innerHTML = html; // 一次性写入，更安全高效
}

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

⚠️ 重要注意事项

• 不要依赖 setTimeout 补救：如问题所述，网络耗时不可预测，硬编码延迟既不可靠又损害用户体验；
• 避免高频 innerHTML +=：每次赋值都会触发 HTML 解析与 DOM 重建，大数据量下性能极差；应先拼接字符串，最后单次赋值；
• document.addEventListener('DOMContentLoaded') 不足：fetch 是异步的，但 DOMContentLoaded 只保证 HTML 解析完成，不保证脚本执行顺序绝对安全；采用 readyState 检测 + load 监听更鲁棒；
• CSV 导出建议：直接读取 innerText 并清洗换行/分隔符比解析 innerHTML 更稳定（避免
  等标签干扰）。

✅ 总结

修复的核心在于理解 Promise 链中 .then() 接收的是「函数引用」而非「函数调用结果」。去掉 print() 的括号，即可确保 print 在 showData 完成 DOM 更新后被精准调用。结合现代语法（let、点号访问）、批量 DOM 写入与健壮的加载检测，你的数据导出流程将变得稳定、高效且易于维护。