你的怀疑完全正确——这段倒计时代码就是导致页面运行数分钟后崩溃的罪魁祸首。核心问题出在定时器的创建逻辑上，我们来一步步拆解并修复它：

问题根源分析 #

在你的updateClock函数内部，每次执行都会新建一个setInterval定时器，但并没有清理之前创建的定时器。这会导致定时器数量指数级增长：

• 第一次调用updateClock创建定时器A，1秒后触发再次调用updateClock
• 第二次调用又创建定时器B，再过1秒，定时器A和B会同时触发，各自创建新的定时器C和D
• 以此类推，几分钟后浏览器会同时运行成千上万个定时器，直接耗尽内存资源，最终引发页面崩溃（Error Code 5通常与内存溢出或资源耗尽相关）

修复后的代码 #

我们只需要把定时器的声明移到updateClock外部，确保整个倒计时周期只创建一次定时器，并在倒计时结束时正确清除它：

const deadline = '2022-09-09T13:02:00.000Z'
const getEventLiveTimeRemaining = (startOfEventDate) => {
  const dateOfEvent = new Date(startOfEventDate)
  const date = document.getElementById("event-live-banner-date")
  date.innerHTML = dateOfEvent.toLocaleString('sv-SE', {year: 'numeric', month: 'numeric', day: 'numeric', hour: '2-digit', minute:'2-digit'})
  const total = Date.parse(startOfEventDate) - Date.parse(new Date())
  const seconds = Math.floor( (total/1000) % 60 )
  const minutes = Math.floor( (total/1000/60) % 60 )
  const hours = Math.floor( (total/(1000*60*60)) % 24 )
  const days = Math.floor( total/(1000*60*60*24) )
  return { total, days, hours, minutes, seconds };
}
const initializeEventLiveCountdown = (id, startOfEventDate) => {
  const clock = document.getElementById(id)
  const daysText = clock.querySelector('.days')
  const hoursText = clock.querySelector('.hours')
  const minutesText = clock.querySelector('.minutes')
  const secondsText = clock.querySelector('.seconds')
  
  // 将定时器变量提升到外部，确保全局唯一
  let timeinterval;
  
  const updateClock = () => {
    const t = getEventLiveTimeRemaining(startOfEventDate)
    daysText.innerHTML = ('0' + t.days).slice(-2)
    hoursText.innerHTML = ('0' + t.hours).slice(-2)
    minutesText.innerHTML = ('0' + t.minutes).slice(-2)
    secondsText.innerHTML = ('0' + t.seconds).slice(-2)
    
    // 倒计时结束时清除唯一的定时器
    if (t.total <= 0 ) {
      clearInterval(timeinterval)
      // 可选：添加倒计时结束后的逻辑，比如隐藏倒计时组件或显示提示信息
    }
  }
  
  // 只创建一次定时器，每秒触发更新
  timeinterval = setInterval(updateClock, 1000)
  // 立即执行一次更新，避免页面加载后等待1秒才显示数据
  updateClock()
}
initializeEventLiveCountdown('event-live-countdown', deadline)

额外优化说明 #

• 新增了页面加载时立即执行updateClock的逻辑，避免用户需要等待1秒才能看到初始倒计时数据，提升体验
• 定时器现在全局唯一，不会再出现内存泄漏问题，你可以通过浏览器开发者工具的「内存」面板监控内存使用情况，确认问题解决

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