本文详解为何在 `promise.then()` 中误写 `print()` 会导致 dom 内容未更新就执行读取操作，并提供零延迟、可靠触发的解决方案，同时优化 dom 操作与代码规范。
在使用 fetch + Promise 链动态更新页面内容后立即读取 DOM 的场景中，一个常见却隐蔽的错误是：在 .then() 中错误地调用了函数而非传入函数引用。这会导致 print() 在请求发起前就被执行，此时 <div id="container"> 仍是空的，innerHTML 自然返回空字符串——并非渲染延迟问题，而是执行时机逻辑错误。
? 根本原因：函数调用 vs 函数引用
原代码中这一行是关键错误：
.then(print())
它等价于：
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
- 立即执行 print()（此时 showData() 尚未运行，DOM 未更新）；
- 将 print() 的返回值（undefined）作为参数传给 .then()；
- 因此 .then(undefined) 实际上不会触发任何操作，或导致静默失败。
✅ 正确做法是传递函数本身（不带括号），让 Promise 在前一步 resolve 后自动调用它：
立即学习“Java免费学习笔记（深入）”；
.then(print) // ✅ 正确：传入函数引用 // 或 .then(() => print()) // ✅ 正确：传入箭头函数（可带参数/逻辑）
✅ 完整修复后的代码（含最佳实践）
<!DOCTYPE html> <html> <head><meta charset="utf-8"></head> <body> <div id="container"></div> </body> </html>
// 更健壮的加载检测：兼容同步/异步执行时机
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 += `<br>${obj.field1}; ${obj.field2};`;
}
container.innerHTML = html; // 一次性写入，更安全高效
}
function print() {
const container = document.getElementById('container');
console.log('当前容器内容：', container.innerHTML);
// ✅ 此时可安全导出为 CSV，例如：
// const csvContent = container.innerText.replace(/<br>/g, '\n').trim();
}⚠️ 重要注意事项
- 不要依赖 setTimeout 补救：如问题所述，网络耗时不可预测，硬编码延迟既不可靠又损害用户体验；
- 避免高频 innerHTML +=：每次赋值都会触发 HTML 解析与 DOM 重建，大数据量下性能极差；应先拼接字符串，最后单次赋值；
- document.addEventListener('DOMContentLoaded') 不足：fetch 是异步的，但 DOMContentLoaded 只保证 HTML 解析完成，不保证脚本执行顺序绝对安全；采用 readyState 检测 + load 监听更鲁棒；
- CSV 导出建议：直接读取 innerText 并清洗换行/分隔符比解析 innerHTML 更稳定（避免 <br> 等标签干扰）。
✅ 总结
修复的核心在于理解 Promise 链中 .then() 接收的是「函数引用」而非「函数调用结果」。去掉 print() 的括号，即可确保 print 在 showData 完成 DOM 更新后被精准调用。结合现代语法（let、点号访问）、批量 DOM 写入与健壮的加载检测，你的数据导出流程将变得稳定、高效且易于维护。
