当 dom 中不再存在元素时，SetInterval 继续在 webcomponent 中运行

Question

目前，我正在开发一个编排多个 Web 组件的简单应用程序。 其中一个组件包含一个 setInterval function。 function 继续运行，即使组件本身不再存在于 dom 中。 有人可以向我解释为什么会这样吗？

这是一个简单的再现：

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 directly

Answer 1

您需要使用生命周期回调来正确使用setInterval和clearInterval 。

下面的例子：

 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 directly

Answer 2

您需要使用disconnectedCallback挂钩，一旦组件从 dom 中删除，它将被调用，因此在此 function 中，您可以清除间隔。

disconnectedCallback() {
  clearInterval(interval)
}

Answer 3

Web 组件有自己的生命周期，当从 DOM 中删除元素时， disconnectedCallback()会被调用。 当元素从 DOM 中移除时调用 is 生命周期钩子。 因此，它是添加清理逻辑和释放资源的理想场所。 在您的情况下，调用clearInterval方法，该方法像您一样清除使用 setInterval() 方法设置的计时器。

disconnectedCallback() {
   clearInterval(interval)
}

Answer 4

一个更简洁的例子：

 <script> customElements.define("my-component", class extends HTMLElement { connectedCallback() { console.log("connectedCallback", this.isConnected); this.innerHTML = "A Web Component"; setTimeout(() => this.remove(), 2000); // triggers disconnectedCallback this.interval = setInterval(() => this.innerHTML += ".", 50); } disconnectedCallback() { console.log("disconnectedCallback", this.isConnected); clearInterval(this.interval); } }); </script> <my-component></my-component>

笔记

• DOM 元素不再存在于disconnectedCallback中，但 Web 组件仍然存在于 memory 中，因此您可以访问之前创建（或附加）的任何内容

• 拖放或append操作触发disconnectedVCallback ，然后再次触发connectedCallback