javascript - 为什么 waitForKeyElements() 尽管后来发生了变化，但只触发一次？

Question

多年来我一直使用 waitForKeyElements()通过用户脚本跟踪网页变化的函数。然而，有时我发现它没有按预期触发并且已经解决了。我遇到了这个问题的另一个例子，所以我现在试图找出问题所在。以下是我可以创建的最简单的示例。

给定一个如下所示的简单 HTML 页面:

<span class="e1">blah</span>

还有一些 JavaScript:

// function defined here https://gist.github.com/BrockA/2625891
waitForKeyElements('.e1', handle_e1, false);

function handle_e1(node) {
    console.log(node.text());
    alert(node.text());
}

setInterval(function() {
    $('.e1').text("updated: "+Math.random());
}, 5000);

我希望这段代码每 5 秒触发一次 alert() 和 console.log() 。但是，它只会触发一次。有什么想法吗？

这是a codepen that demonstrates this 。

Answer 1

根据设计和默认情况，waitForKeyElements 仅处理节点一次。要告诉它继续检查，请从回调函数返回true。
您还需要比较字符串(或其他内容)以查看它是否已更改。

因此，在这种情况下，handle_e1() 类似于:

function handle_e1 (jNode) {
    var newTxt  = jNode.text ();
    if (typeof this.lastTxt === "undefined"  ||  this.lastTxt !== newTxt) {
        console.log (newTxt);
        this.lastTxt = newTxt;
    }
    return true;    // Allow repeat firings for this node.
}

---

---

尽管如此，如果您在一个页面上有很多字符串比较，那么性能可能会成为一个问题。在这种情况下，切换到 MutationObserver 方法可能是最好的选择。