Mi sitio web se bloquea después de unos minutos cuando estoy en él. Recibo el código de error 5 del navegador. El sitio web se bloquea en todos los navegadores. Seguí esta guía, pero sin buenos resultados. Una cosa que es bueno mencionar es que tengo un temporizador de cuenta regresiva en mi página. ¿Puede causar un aplastamiento de una página?
Este es mi código para una cuenta regresiva:
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)
El problema se debe a que está creando un nuevo intervalo dentro de la función llamada desde el intervalo, por lo que está creando intervalos de manera exponencial, lo que probablemente agote toda la RAM disponible en su sistema y provoque que el navegador se bloquee.
Para solucionar el problema, mueva la llamada setInterval() fuera del sitio de la función updateClock() . Además, debe establecer una fecha en el futuro para que funcione la cuenta regresiva.
El siguiente ejemplo soluciona ambos problemas:
//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
<span class="hours"></span>:
<span class="minutes"></span>:
<span class="seconds"></span>
</div>