12

现在我试图找到一种方法来检测元素 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/

显然这种方式是行不通的，而且根本不是很准确。有没有更好/不同的做法/实现这一点？

感谢您的帮助，大约一周以来，我一直在尝试弄清楚如何更好地做到这一点，但我找不到解决方法，我希望我在正确的地方发布了这个问题，并且在正确的时间。

4

4 回答 4

7

使用 avar存储元素的当前text值，然后在 a 中对其进行检查，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

小提琴

您也可以将值存储在 .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);

小提琴

另一种方法，为了节省客户的内存，您可以只存储元素的 childdiv的数量：#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);

小提琴

编辑：这是我最后的补充，带有一个DOM 突变事件侦听器：

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

小提琴（未在 IE < 8 中测试）

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

于 2012-06-11T01:12:14.783 回答
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小提琴

于 2012-06-11T01:22:58.967 回答
1

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

于 2012-06-11T01:58:36.110 回答
0

虽然不强烈推荐，但也可以使用Paul Irish 的 Duck 打孔方法来绑定 jQuery 的 append 函数——如果你确定该append函数是添加内容的方式（演示）：

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

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

于 2012-06-11T03:44:38.203 回答