當元素不再存在于dom中時，SetInterval繼續在webcomponent中運行-有解無憂

目前，我正在開發一個簡單的應用程式，它可以編排多個 Web 組件。其中一個組件包含一個 setInterval 函式。即使組件本身不再存在于 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

uj5u.com熱心網友回復：

您需要使用生命周期回呼來正確使用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

uj5u.com熱心網友回復：

您需要使用disconnectedCallback鉤子，一旦組件從 dom 中移除，它就會被呼叫，因此在此函式中，您可以清除間隔。

disconnectedCallback() {
  clearInterval(interval)
}

uj5u.com熱心網友回復：

Web 組件有自己的生命周期，當一個元素從 DOM 中洗掉時會被disconnectedCallback()呼叫。當元素從 DOM 中移除時，生命周期鉤子會被呼叫。因此，它是添加清理邏輯和釋放資源的理想場所。在你的情況下，clearInterval像你一樣呼叫使用 setInterval() 方法清除計時器集的方法。

disconnectedCallback() {
   clearInterval(interval)
}

uj5u.com熱心網友回復：

一個更簡潔的例子：

<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 組件仍然存在于記憶體中，因此您可以訪問之前創建（或附加）的任何內容
拖/放或append操作觸發disconnectedVCallback ，然后將connectedCallback再次

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/383622.html

標籤：javascript 打字稿设置间隔网络组件

上一篇：獲取JS時如何拋出服務器錯誤

下一篇：從陣列中檢索值會引發錯誤javacript