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以存储当前text ：

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 的

另一种方法是，为了保存客户的记忆，您只需存储div元素所具有的子#chat的数量：

$('#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＆lt; 8中测试）

注意：正如评论中所述，即使仍然支持变异事件，由于性能损失和不同浏览器之间的某些不兼容性，它们也会被归类为deprecated by W3C，因此建议使用上述解决方案之一，只有在没有别的办法时才使用DOM Mutation事件。

Answer 2

只需查看上次聊天即可提高效率，也可以按照自己的意愿行事。它不起作用的唯一方法是同一个人两次发送相同的消息 - 这很可能不会发生。

我希望这会奏效：

 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();

Js Fiddle

Answer 3

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

Answer 4

虽然不强烈推荐，但也可以使用Paul Irish's Duck punching方法绑定到jQuery的追加功能 - 如果你确定append函数是如何添加内容（demo）：

(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);

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

我需要一种新的方法来检测元素HTML是否有变化

4 个答案: