javascript - 我需要一种新方法来检测元素 HTML 是否发生了变化

Question

现在我正在尝试找到一种方法来检测元素 HTML 何时已更改。

我目前正在尝试:

var a, b;
setInterval(function() {
    a = $('#chat').text();
}, 150);
setInterval(function() {
    b = $('#chat').text();
    if (a !== b) {
        alert("There has been a new message.");
    }
}, 200);​

我所做的是每 150 毫秒检查一次 #chat 的 HTML，然后每 200 秒再次检查一次 HTML，然后检查变量 a 是否不等于变量 b 他们将来我会做一些事情，但现在我只是提醒一些事情。

你可以在这里看到它:http://jsfiddle.net/MT47W/

显然这种方法行不通，而且一点也不准确。 有没有更好/不同的方法来做/实现这个？

感谢您的帮助，大约一个星期以来，我一直在努力弄清楚如何更好地解决这个问题，但我就是找不到解决这个问题的办法，我希望我把这个问题贴在了右边地点，并在正确的时间。

Answer 1

使用 var 存储元素的当前 text 然后在 setInverval 中检查它并更新 var 检查后存储当前的文本:

var a = $('#chat').text();
setInterval(function() {
    if (a !== $('#chat').text()) { //checks the stored text against the current
        alert("There has been a new message."); //do your stuff
    }
    a = $('#chat').text(); //updates the global var to store the current text
}, 150); //define your interval time, every 0.15 seconds in this case

Fiddle

您也可以将值存储在 .data() 中避免使用全局变量的元素。

使用 .data() 的例子:

$('#chat').data('curr_text', $('#chat').text());
setInterval(function() {
    if ($('#chat').data('curr_text') !== $('#chat').text()) {
        alert("There has been a new message.");
    }
     $('#chat').data('curr_text', $('#chat').text());
}, 150);

Fiddle

另一种方法，为了节省客户端的内存，您可以只存储 #chat 元素具有的子 div 的数量:

$('#chat').data('n_msgs', $('#chat').children().length);
setInterval(function() {
    if ($('#chat').data('n_msgs') !== $('#chat').children().length) {
        alert("There has been a new message.");
    }
     $('#chat').data('n_msgs', $('#chat').children().length);
}, 150);

Fiddle

---

编辑:这是我最后添加的内容，带有 DOM mutation event listener :

$('#chat').on('DOMNodeInserted', function() {
    alert("There has been a new message.");
});

Fiddle (未在 IE < 8 中测试)

注意:如评论中所述，尽管仍然支持突变事件，但它们被归类为 deprecated by W3C由于性能损失和跨浏览器的一些不兼容性，因此建议使用上述解决方案之一，并且仅在没有其他办法时才使用 DOM Mutation 事件。