根本原因是只执行了一次赋值，未用定时器持续读取当前时间并写入dom；必须确保setinterval回调内显式更新textcontent，缓存dom引用，并处理重绘时定时器残留或时区字符串错误。
用 setInterval 更新 td 内容时，为什么时间不动？
多数人写完 JS 后发现 td 里的文字没变，根本原因是：只执行了一次赋值，没持续触发更新。必须用定时器反复读取当前时间并写入 DOM。
- 确保目标
td有唯一标识，比如id="clock"或通过 class + 索引定位，避免选错单元格 -
setInterval的回调里，必须显式调用textContent或innerText（不用innerHTML，除非含 HTML 标签） - 别在循环里反复
document.querySelector——查一次缓存到变量，否则每次重排重绘开销大
如何让多个 td 显示不同时区时间？
单个页面展示纽约、东京、伦敦时间很常见，靠 Date.prototype.toLocaleString() 的 timeZone 选项最稳，不用手动算偏移。
- 每个
td绑定不同timeZone值，例如"America/New_York"、"Asia/Tokyo" - 注意浏览器兼容性：
toLocaleString的timeZone在 IE 完全不支持，Edge 12+、Chrome 24+、Firefox 29+ 可用 - 格式建议固定为
{ hour: '2-digit', minute: '2-digit', second: '2-digit' }，避免 AM/PM 或 24 小时制混淆
const nyCell = document.getElementById('ny-time');
setInterval(() => {
nyCell.textContent = new Date().toLocaleString('en-US', {
timeZone: 'America/New_York',
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
}, 1000);
为什么用 requestAnimationFrame 替代 setInterval(1000)？
秒级更新看似够用，但 setInterval(1000) 实际可能延迟几十毫秒，导致秒针跳动不稳；尤其页面后台运行时，浏览器会节流定时器。
-
requestAnimationFrame每帧触发，配合Date.now()计算真实经过时间，能实现更顺滑的秒更新 - 适合对时间精度要求稍高的场景（如倒计时、直播同步），但要注意它每秒执行次数不固定（通常 60fps）
- 别直接用
raf更新所有td——先判断是否整秒再更新，否则浪费 DOM 操作
表格重渲染时时间丢失怎么办？
用 Vue/React 或手动 innerHTML 重写整张表后，之前绑定的定时器还在跑，但目标 td 已被销毁，更新无效甚至报错 Cannot set property 'textContent' of null。
- 每次重绘前，先
clearInterval或用AbortController（现代方案）清理旧定时器 - 把时间更新逻辑封装成函数，在表格重建后重新调用初始化，而不是依赖全局定时器长期存活
- 如果用框架，优先用响应式数据驱动（如 Vue 的
ref+watchEffect），而非直接操作 DOM
"Asia/Shanghai" 不是 "China"）和重绘后的定时器残留——这两个点一出问题，时间就静止或错乱，得盯住控制台报错和元素是否存在。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
