我需要一种新的方法来检测元素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

使用a var存储元素的当前值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);

小提琴

另一种方法,以节省客户端的内存,你可以保存孩子的数量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);

小提琴

编辑:这是我最后的添加,有一个DOM突变事件监听器:

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

小提琴(未在IE中测试<8)

注意:如评论中所述,即使仍然支持突变事件,由于性能损失和不同浏览器之间的某些不兼容性,它们被W3C归类为弃用,因此建议使用上述解决方案之一并仅使用DOM Mutation没有其他方法的事件.