如何解决Polymer中iron-timer结合moment-js的hh:mm:ss计时不更新问题

嘿，我懂你这会儿的困扰——计时器明明在走，但格式化后的时间却一动不动对吧？这大概率是因为你只在页面初始化时格式化了一次时间，没跟上iron-timer的更新节奏。咱们一步步来把它搞定：

核心问题：没绑定计时器的更新事件 #

iron-timer（应该是Polymer的那个组件吧？）在计时过程中，每秒会触发一次tick事件，或者当elapsedTime属性变化时会触发对应的属性变更事件。你需要在这些事件触发时，重新调用moment.js去格式化最新的计时时长，再同步更新到页面上。

具体解决方案示例 #

假设你的HTML结构是这样的：

<iron-timer id="myTimer" auto-start></iron-timer>
<p>当前计时：<span id="formattedTime"></span></p>

对应的JavaScript代码可以这么写：

// 获取DOM元素
const timer = document.getElementById('myTimer');
const timeDisplay = document.getElementById('formattedTime');

// 封装格式化函数，把毫秒转成hh:mm:ss格式
function formatElapsedTime(elapsedMs) {
  // 用moment的duration处理持续时间更准确，支持超过24小时的计时
  const duration = moment.duration(elapsedMs);
  // 补零确保每个时间单位都是两位数
  const hours = String(duration.hours()).padStart(2, '0');
  const minutes = String(duration.minutes()).padStart(2, '0');
  const seconds = String(duration.seconds()).padStart(2, '0');
  return `${hours}:${minutes}:${seconds}`;
}

// 初始化显示初始时间（比如00:00:00）
timeDisplay.textContent = formatElapsedTime(timer.elapsedTime);

// 监听tick事件，每秒更新一次显示内容
timer.addEventListener('tick', () => {
  timeDisplay.textContent = formatElapsedTime(timer.elapsedTime);
});

额外小提示 #

如果你不需要支持超过24小时的计时，也可以用更简洁的写法：

function formatElapsedTime(elapsedMs) {
  // 把毫秒数当成UTC时间戳处理，直接格式化
  return moment.utc(elapsedMs).format('HH:mm:ss');
}

这样写的原因是，咱们把初始化和动态更新的逻辑分开了：页面加载时先渲染一次初始时间，之后每秒钟跟着计时器的tick事件重新计算并更新显示，自然就能跟上计时器的节奏啦。

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