如何在JavaScript中检测当前日期变化？

针对你提到的两种基础方案，先解答你的疑问，再给出更可靠的实现思路：

关于setTimeout方案的疑问 #

• 标签页省电模式下的回调执行：浏览器休眠标签页时会暂停计时器，当标签页重新活跃时，如果原定的超时时间已经过了，setTimeout会立刻触发回调。所以不会出现“错过就不执行”的情况，只是触发时机可能不是严格午夜，而是标签页恢复的时候。
• 时区/夏令时变更处理：如果只计算一次到午夜的时间，遇到夏令时切换（一天23/25小时）或者手动改时区，计时器就会不准。解决办法很简单：每次回调执行完，都重新计算下一次到午夜的时间并设置新的setTimeout，这样就能自动适配时间变化。

关于setInterval方案的优化 #

每秒轮询确实太耗电，移动端尤其明显。可以把间隔拉长到5-10分钟，既能覆盖时区变更、手动改时间的场景，又不会对续航造成太大影响。不过相比之下，setTimeout+动态重计算的方案效率更高。

推荐的实现方式 #

结合两种方案的优势，做一个自适应的计时器：

1. 先写个计算距离下一个午夜毫秒数的工具函数：

function getMsUntilMidnight() {
  const now = new Date();
  // 构造明天零点的日期对象
  const midnight = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
  return midnight.getTime() - now.getTime();
}

2. 核心更新函数，执行高亮逻辑后自动重置计时器：

function updateCalendarHighlight() {
  // 这里替换成你的日历高亮逻辑，比如切换当前日期的CSS类
  // document.querySelector('.current-date').classList.remove('highlight');
  // document.querySelector(`[data-date="${new Date().toISOString().split('T')[0]}"]`).classList.add('highlight');
  
  console.log('已更新当前日期高亮');
  
  // 重新设置下一次午夜的计时器
  setTimeout(updateCalendarHighlight, getMsUntilMidnight());
}

3. 页面初始化时启动：

// 页面加载先执行一次，确保初始高亮正确
updateCalendarHighlight();

补充边界场景处理 #

• 用户手动改系统时间：如果用户直接修改了系统日期，之前设置的setTimeout会失效。可以加个低频率轮询做兜底：

let lastRecordedDate = new Date().getDate();
// 每10分钟检查一次日期是否变化
setInterval(() => {
  const currentDate = new Date().getDate();
  if (currentDate !== lastRecordedDate) {
    lastRecordedDate = currentDate;
    updateCalendarHighlight();
  }
}, 10 * 60 * 1000);

• 标签页恢复活跃：监听页面可见性变化，在标签页从后台切回时立即检查日期：

document.addEventListener('visibilitychange', () => {
  if (!document.hidden) {
    const currentDate = new Date().getDate();
    if (currentDate !== lastRecordedDate) {
      lastRecordedDate = currentDate;
      updateCalendarHighlight();
    }
  }
});

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