Shopify站点10分钟JavaScript倒计时器归零时偶现NaN错误求助

根因分析 #

• localStorage存储Date类型值时会自动转为字符串，该字符串不属于标准ISO日期格式，不同浏览器解析时存在兼容性问题，偶发出现new Date(myTimer)解析失败返回Invalid Date，调用getTime()得到NaN
• 当theTimerSet为NaN时，计算得到的倒计时差值distance也为NaN，NaN < 0的判断结果为假，不会触发清零逻辑，分钟、秒数计算结果均为NaN，最终渲染到页面上就是异常显示

修复方案 #

• 存储到localStorage时直接保存时间戳数字，彻底避免日期字符串解析兼容问题
• 增加边界判断，只要distance为非有效值就直接触发清零逻辑
• 兼容已存储的旧格式日期数据，解析失败自动重置倒计时

修复后完整代码 #

JS代码 #

var tenMinutesLater = new Date();
var theTimerSet = new Date().getTime();

var myTimer = localStorage.getItem("myCountDown");
if (myTimer === null) {
  tenMinutesLater.setMinutes(tenMinutesLater.getMinutes() + 10);
  // 直接存储时间戳，避免日期字符串解析问题
  localStorage.setItem("myCountDown", String(tenMinutesLater.getTime()));
  theTimerSet = tenMinutesLater.getTime();
} else {
  // 优先解析为时间戳，兼容旧存储的日期字符串
  let parsedTime = Number(myTimer);
  if (isNaN(parsedTime)) {
    parsedTime = new Date(myTimer).getTime();
    // 旧值也解析失败的话重置倒计时
    if (isNaN(parsedTime)) {
      tenMinutesLater.setMinutes(tenMinutesLater.getMinutes() + 10);
      parsedTime = tenMinutesLater.getTime();
      localStorage.setItem("myCountDown", String(parsedTime));
    }
  }
  theTimerSet = parsedTime;
}

var x = setInterval(function() {
  var now = new Date().getTime();
  var distance = theTimerSet - now;

  // 边界判断：差值非法或已归零，直接清空定时器显示0
  if (isNaN(distance) || distance < 0) {
    clearInterval(x);
    document.getElementById("the-timer").innerHTML = "0";
    return;
  }

  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
  document.getElementById("the-timer").innerHTML = minutes + "m " + seconds + "s ";
}, 1000);

HTML代码（保持原有逻辑即可） #

<div class="timer" id="the-main-timer">
  Checkout within the next <em><span class="the-timer" id="the-timer"></span> minutes</em> to avoid losing your order.
</div>

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