Javascript 我需要一种新的方法来检测HTML元素是否发生了更改

现在我正试图找到一种方法来检测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毫秒检查一次聊天室的HTML，然后每200秒再次检查HTML，然后检查变量

a

是否不等于变量

b

未来我会这样做，但现在我只是提醒一下

你可以在这里看到它：

显然，这种方法不起作用，也不太准确。 是否有更好/不同的方法来实现这一点

---

谢谢你的帮助，我已经试着找出如何做得更好一个星期了，但我只是找不到一个解决办法，我希望我把这个问题在正确的地方，在正确的时间

使用

var

存储元素的当前

文本

，然后在

setinvval

中对其进行检查，并在检查后更新

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

您还可以将值存储在元素的中，以避免使用全局变量

使用

.data（）

的示例：

另一种方法是，为了节省客户端内存，您可以只存储您的

#chat

元素具有的子

div

s的数量：

$('#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);

---

编辑：这是我最后添加的内容，其中包括：

（未在IE<8中测试）

---

注意：如评论中所述，尽管变异事件仍然受支持，但由于性能损失和不同浏览器之间的某些不兼容，它们被归类为，因此，建议使用上述解决方案之一，并且只有在没有其他方法的情况下才使用DOM突变事件。

只需查看最后一次聊天，就可以提高效率，还可以随心所欲。唯一不起作用的方法是，如果同一个人发送相同的消息两次——这很可能不会发生

我希望这能奏效：

 var lastMessage = $('#chat .body').last().text();
    function checkMessages(){
        var newLastMessage = $('#chat .body').last().text();
        if(lastMessage !== newLastMessage && $('#chat .body').last().length > 0){
             //message has changed
            alert("There has been a new message.");
            lastMessage = $('#chat .body').last().text();
        }
        setTimeout(function(){checkMessages();},1000);
    }
    checkMessages();

---

使用crc32或md5哈希检查数据是否已更改。只需获取要检查的div的html内容，用crc32或md5将其作为字符串散列，就可以得到一个表示该内容的字符串。使用隐藏的时间戳等来确保一个用户的多条消息得到不同的散列。如果您在setInterval回调中执行此操作，应该会很好。

虽然不强烈建议使用，但也可以使用方法将其与jQuery的append函数相结合-如果您确实知道

append

函数是如何添加内容的（）：

---

使用此方法，不需要计时循环。

如果同一用户发布同一消息两次会怎么样？您的功能不会为垃圾邮件发送者触发：PGood point。然而，我相当肯定用户不会希望从垃圾邮件发送者那里得到连续的通知。此外，这也不重要，因为“新消息”基本上是相同的消息D哪些浏览器不支持setInterval？很抱歉，我自己的一个脚本在过去与setInterval存在浏览器兼容性问题。然而，根据，它在IE4及以上版本中得到支持。我将删除这一部分……我可能弄错了，但我很确定，侦听DOM事件并没有得到很好的支持，也没有从最新的规范中完全删除。@VahurRoosimaa，我可能弄错了，但jQuery主要用于侦听事件委派的DOM事件，我看到它最近在回答中被广泛使用。现在，如果它带来任何兼容性问题，任何较旧的修订版也将起作用。=]或者你的意思是说，特别是什么？哇，非常感谢。我从来没有听说过：DOMNodeInserted，不确定它是否会像Vahur说的那样得到很好的支持，所以我想我会使用第二种方法。但是谢谢你的这些方法。但我也考虑过使用数据来计算聊天时孩子们的长度。我每天都会学到新东西！：）@Shawn31313相同。=]如果有人对不推荐使用的DOM突变事件有更多信息，请随意分享，我将在答案中进行编辑。到目前为止，我发现变异事件会降低性能，我将在答案中添加一个注释a以避免使用这些事件。@VahurRoosimaa是的，你是对的，我在w3c上找到了一些材料，并添加了一个注释以避免使用DOM变异事件，除非严格必要。

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

 var lastMessage = $('#chat .body').last().text();
    function checkMessages(){
        var newLastMessage = $('#chat .body').last().text();
        if(lastMessage !== newLastMessage && $('#chat .body').last().length > 0){
             //message has changed
            alert("There has been a new message.");
            lastMessage = $('#chat .body').last().text();
        }
        setTimeout(function(){checkMessages();},1000);
    }
    checkMessages();

(function($) {
    // store original reference to the method
    var _old = $.fn.append;
    $.fn.append = function(arg) {
        // append as usual
        _old.apply(this, arguments);

        // do your own checking here
        // "this" is a jQuery object
        if (this[0].id === "chat") {
            alert('there is a new message!');
        }
        return this;
    };

})(jQuery);