Por el momento, estoy trabajando en una aplicación simple que organiza múltiples componentes web. Uno de estos componentes contiene una función setInterval. La función continúa ejecutándose, incluso cuando el componente en sí ya no está presente en el dom. ¿Puede alguien explicarme por qué esto es así?
Aquí hay una reproducción simple:
const selectorEl = document.getElementsByTagName('body')[0]; selectorEl.innerHTML = '<my-component></my-component>'; // Append custom component to body class WebComponent extends HTMLElement { constructor() { super(); this.innerHTML = '<span>This should not be visible since I am removed instantly!</span>'; setInterval(() => console.log('I am still running...'), 2000); } } window.customElements.define('my-component', WebComponent); selectorEl.innerHTML = ''; // Remove element from the dom directlyDebe usar devoluciones de llamada del ciclo de vida para usar correctamente setInterval y clearInterval .
Ejemplo a continuación:
const selectorEl = document.getElementsByTagName("body")[0]; selectorEl.innerHTML = "<my-component></my-component>"; // Append custom component to body class WebComponent extends HTMLElement { connectedCallback() { this.innerHTML = "<span>This should not be visible since I am removed instantly!</span>"; this.interval = setInterval( () => console.log("I am still running...", Math.random()), 2000 ); } disconnectedCallback() { clearInterval(this.interval); } } window.customElements.define("my-component", WebComponent); setTimeout(() => selectorEl.innerHTML = "",7000); // Remove element from the dom directlyDebe usar el gancho desconectadoCallback , se llamará una vez que el componente se elimine del dom, por lo que en esta función, puede borrar su intervalo.
disconnectedCallback() { clearInterval(interval) }Los componentes web tienen su propio ciclo de vida y cuando se elimina un elemento del DOM, se llama a disconnectedCallback() . Este enlace de ciclo de vida se llama cuando el elemento se elimina del DOM. por lo tanto, es un lugar ideal para agregar lógica de limpieza y liberar recursos. en su caso, llame al método clearInterval que borra un temporizador establecido con el método setInterval() como lo hizo.
disconnectedCallback() { clearInterval(interval) }