div标记更改的侦听器

Question

我正在使用第三部分库扫描二维码。扫描完成后，<div id="qr-code-status"></div>内容发生变化。在扫描过程中，div标签的innerText说"；QR码扫描"；。一旦扫描完成，innerText就变为"；QR码扫描完成"；。当它变为"；QR码扫描完成"；这样我就可以把用户带到下一页。

扫描二维码后，如果我在浏览器控制台中键入document.getElementByID("qr-code-status").innerText，我会得到"；QR码扫描完成"；。需要找出在代码中捕获它的方法

这样做是行不通的：

componentDidUpdate {
if(document.getElementByID("qr-code-status").innerText === "QR code scan complete") {
this.nextPage();
}
}

什么是最好的实施？

Answer 1

使用MutationObserver:

status = document.getElementById("qr-code-status");
this.observer = new MutationObserver(() => {this.observer.disconnect(); this.nextPage();});
this.observer.observe(status, { characterData: true });

一旦发生变化，这将自动断开连接。然后它将调用this.nextPage。