Safari浏览器DateTime问题咨询及倒计时代码兼容性排查

嘿，我帮你梳理下这段倒计时代码在Safari里可能踩的DateTime相关坑，毕竟Safari对日期处理的挑剔程度可是出了名的😅

1. 日期字符串解析兼容性问题（最常见的坑） #

Safari对new Date()的入参格式要求非常严格，只认RFC 2822或ISO 8601标准格式。如果你的data-countdown属性值是类似2024-12-31 23:59:59这种用空格分隔日期和时间的格式，Chrome能正常解析，但Safari会直接返回Invalid Date，导致后续计算全错。

修复方案： #

把日期字符串转换成Safari能识别的格式，比如用正则把空格替换成T：

// 遍历每个倒计时元素时，先处理日期格式
var rawDate = live_date[i].getAttribute('data-countdown');
// 替换空格为T，兼容ISO 8601格式
var parsedDate = new Date(rawDate.replace(/\s+/g, 'T'));
// 先判断日期是否解析成功
if (isNaN(parsedDate.getTime())) {
  console.warn('无效的日期格式:', rawDate);
  // 可以在这里设置默认显示，比如"已结束"
  live_date[i].textContent = '已结束';
  continue;
}
var seconds_left = (parsedDate.getTime() - current_date) / 1000;

2. 变量拼写错误导致的逻辑中断 #

看你代码里的片段：hours = parseInt(seconds_lef...，这里明显少写了一个t（应该是seconds_left）。这种语法错误在Safari里会直接中断整个定时器回调的执行，而且控制台报错可能没那么显眼，得仔细检查变量拼写。

3. 负数时间的处理逻辑缺失 #

代码里有if (seconds_left <= 0) { } else { ... }，但if块是空的。当倒计时结束后，seconds_left会变成负数，此时计算days、hours会得到负数值，在Safari里会直接显示负数，影响用户体验。

修复方案： #

在if块里添加倒计时结束后的处理逻辑：

if (seconds_left <= 0) {
  // 倒计时结束，更新显示内容
  live_date[i].textContent = '倒计时已结束';
} else {
  // 原有计算逻辑...
  days = parseInt(seconds_left / 86400);
  seconds_left = seconds_left % 86400;
  hours = parseInt(seconds_left / 3600);
  // 补全剩余的minutes、seconds计算
}

4. 定时器精度问题（后台标签页/低功耗模式） #

Safari在后台标签页或者开启低功耗模式时，会大幅降低setInterval的执行频率（比如从1000ms变成10000ms），导致倒计时更新不及时，出现时间跳变的情况。

优化方案： #

改用requestAnimationFrame来模拟定时器，每次更新时重新获取当前时间，不依赖定时器的固定间隔：

(function() {
  function updateCountdown() {
    var live_date = $('.livedate');
    var current_date = new Date().getTime();
    for (var i = 0; i < live_date.length; i++) {
      // 这里放原有日期解析、计算逻辑...
    }
    // 递归调用，保证每次浏览器重绘时更新
    requestAnimationFrame(updateCountdown);
  }
  // 启动倒计时更新
  requestAnimationFrame(updateCountdown);
})();

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