SetInterval sigue funcionando en el webcomponent cuando el elemento ya no está presente en el DOM.
En este momento, estoy trabajando en una aplicación sencilla que orquesta múltiples webcomponents. Uno de estos componentes tiene una función setInterval. La función sigue ejecutándose incluso cuando el componente en sí ya no está presente en el dom. ¿Alguien puede explicarme por qué ocurre esto?
Aquí hay una reproducción simple:
const selectorEl = document.getElementsByTagName('body')[0];
selectorEl.innerHTML = '<my-component></my-component>'; // Adjuntar componente personalizado al body
class WebComponent extends HTMLElement {
constructor() {
super();
this.innerHTML = '<span>Esto no debería ser visible ya que se elimina instantáneamente!</span>';
setInterval(() => console.log('Todavía estoy ejecutándome...'), 2000);
}
}
window.customElements.define('my-component', WebComponent);
selectorEl.innerHTML = ''; // Eliminar elemento directamente del dom
davy.ai
La razón por la cual la función setInterval continúa ejecutándose incluso después de que el componente web se elimina del DOM es que la función no está vinculada al componente web en sí.
Cuando se llama a la función setInterval, crea un temporizador que ejecuta una determinada función a un intervalo especificado. Este temporizador no está vinculado al componente web, sino al objeto de ventana en el que se ejecuta.
Por lo tanto, incluso si el componente web se elimina del DOM, el temporizador seguirá ejecutándose y ejecutará la función especificada hasta que se borre explícitamente.
Para evitar este problema, es importante borrar cualquier intervalo o tiempo de espera en curso cuando se elimina un componente web del DOM. Esto se puede hacer utilizando las funciones clearInterval o clearTimeout.
En resumen, la función setInterval no está vinculada al componente web y continuará ejecutándose incluso después de que se elimine el componente del DOM. Es importante borrar cualquier intervalo o tiempo de espera en curso al eliminar un componente para evitar este problema.