The website crash, problems with countdown timer

Question

My website crashes after some minutes when I am on it. I get error code 5 from browser. The website crashes on all browsers. I followed this guide, but no good results. One thing that is good to mention is that I have a countdown timer on my page. Can it cause a crush of a page?

This is my code for a countdown:

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')

    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)
        const timeinterval = setInterval(updateClock,1000)
        if (t.total <= 0 ) {
          clearInterval(timeinterval)
        }
      }

      updateClock()

}

initializeEventLiveCountdown('event-live-countdown', deadline)

Error message from Chrome

Answer 1

The issue is because you're creating a new interval within the function called from the interval, so you're exponentially creating intervals which is most likely depleting all available RAM in your system causing the browser to crash.

To fix the problem move the setInterval() call outsite of the updateClock() function. Also, you need to set a date in the future for the countdown to work.

The example below fixes both of these problems:

//const deadline = '2022-09-09T13:02:00.000Z'
const deadline = new Date();
deadline.setHours(deadline.getHours() + 2); // setting time + 2, just for this demo

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')

  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)
    }
  }

  const timeinterval = setInterval(updateClock, 1000)
  updateClock()
}

initializeEventLiveCountdown('event-live-countdown', deadline)

div {
  display: flex;
}

<div id="event-live-banner-date"></div>
<div id="event-live-countdown">
  <span class="days"></span>d&nbsp;
  <span class="hours"></span>:
  <span class="minutes"></span>:
  <span class="seconds"></span>
</div>