JavaScript倒计时器：结束后“Currently streaming”两小时未消失故障排查

你的代码核心问题在于没有正确计算目标直播日期的完整时间，只是修改了当前日期的时分秒，导致当目标直播是未来星期几时，生成的targetDate实际上是当前日期的对应时分，早于当前时间，直接触发“Currently streaming”，进而陷入循环；另外，直播进行中的两小时内，也会因为同样的逻辑错误重复触发显示文本。

具体错误点 #

1. targetDate初始化错误：

   const targetDate = new Date();
   targetDate.setUTCHours(nextStreamTime.hour, nextStreamTime.minute, 0, 0);
   

   这段代码仅修改了当前日期的时分秒，但没有将日期调整到nextStreamTime.day对应的星期几。比如当前是周日（UTC day 0），下一次直播是周一（day 1）17:00，代码会把targetDate设置成周日的17:00，而非周一的17:00，此时timeDifference必然为负，直接进入直播状态。

2. getNextStreamTime返回的是星期几（1-6），但后续代码没有结合日期计算，导致生成的目标时间永远是当前日期的对应时分，而非正确的未来日期。

修复后的完整代码 #

// Stream slots in UTC (Germany is UTC+2)
const streamTimes = [
  { day: 1, hour: 17, minute: 0 },     // Monday
  { day: 2, hour: 17, minute: 0 },     // Tuesday
  { day: 3, hour: 17, minute: 0 },     // Wednesday
  { day: 4, hour: 17, minute: 0 },     // Thursday
  { day: 5, hour: 18, minute: 0 },     // Friday
  { day: 6, hour: 13, minute: 0 },     // Saturday
];

function getNextStreamTime() {
  const now = new Date();
  const currentDay = now.getUTCDay();
  const currentHour = now.getUTCHours();
  const currentMinute = now.getUTCMinutes();
  
  for (let i = 0; i < streamTimes.length; i++) {
    const streamTime = streamTimes[i];
    if (streamTime.day > currentDay || (streamTime.day === currentDay && streamTime.hour > currentHour) || (streamTime.day === currentDay && streamTime.hour === currentHour && streamTime.minute > currentMinute)) {
      return streamTime;
    }
  }

  // If there are no more stream slots, move on to monday
  return streamTimes[0];
}

function startCountdown() {
  const countdownElement = document.getElementById("countdown");
  
  const nextStreamTime = getNextStreamTime();
  const now = new Date();
  const currentDay = now.getUTCDay();
  
  // 计算目标日期与当前日期的天数差
  let daysToAdd = nextStreamTime.day - currentDay;
  // 如果天数差为负（说明是下一周的目标日），加7天
  if (daysToAdd < 0) {
    daysToAdd += 7;
  }
  
  // 创建正确的目标日期
  const targetDate = new Date(now);
  targetDate.setUTCDate(targetDate.getUTCDate() + daysToAdd);
  targetDate.setUTCHours(nextStreamTime.hour, nextStreamTime.minute, 0, 0);
  
  const timer = setInterval(() => {
    const currentDate = new Date();
    const timeDifference = targetDate - currentDate;
    
    if (timeDifference <= 0) {
      clearInterval(timer);
      countdownElement.innerHTML = "Currently streaming";
      // 两小时后启动下一次倒计时
      setTimeout(startCountdown, 2 * 60 * 60 * 1000); 
      return;
    }
    
    const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
    const hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);
    
    countdownElement.innerHTML = `${days} days, ${hours} hours, ${minutes} minutes, ${seconds} seconds`;
  }, 1000);
}

startCountdown();

关键修改说明 #

• 新增daysToAdd计算：根据当前星期几和目标直播星期几的差值，计算需要添加的天数。如果差值为负（比如当前是周日，目标是周一），则加7天，确保目标日期是下一周的对应星期几。
• 修正targetDate的创建：先基于当前日期创建对象，然后添加daysToAdd调整到正确的星期几，再设置时分秒为直播时间。这样生成的targetDate才是真正的下一次直播时间，不会出现早于当前时间的情况。

这样修改后，倒计时会正确计算到下一次直播的时间，直播结束（两小时后）会自动启动下一轮倒计时，不会再出现文本永久停留的问题。

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