要素に変更があったかどうかを検出する新しい方法が必要です。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 Iが#chatのHTMLをチェックミリ秒と私はもう一度HTMLをチェックするごとに200秒で、その変数aがないかどうかを確認変数bに等しい将来私はそれで何かをしますが、今のところ私はただ何か警告します。

あなたはそれがここに住んで見ることができます：http://jsfiddle.net/MT47W/

は明らかにこの方法が動作していないと、全く非常に正確ではありません。 これを行うには、より良い/異なる方法がありますか？

私はこれを約1週間改善する方法を見つけようとしてきましたが、これについての修正を見つけることができず、私はこの問題を適切な場所に、そして適切な時に。

Answer 1

setInvervalで、それに対してチェックし、確認した後、現在のtextを保存するためにvarを更新し、その要素の現在のtextを保存するために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

別のアプローチは、あなただけの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

---

EDIT：はここ DOM mutation event listenerで、私の非常に最後の添加です：

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

Fiddle（IE < 8でテストされていない）

注：で述べたようにたとえ突然変異イベントがまだサポートされているとしても、コメントはdeprecated by W3Cとして分類されますフォームの損失といくつかの異なるブラウザ間での非互換性があるため、上記のソリューションの1つを使用し、別の方法がない場合にのみDOM Mutationイベントを使用することをお勧めします。

Answer 2

最後のチャットを確認するだけで効率が向上し、必要なこともやります。唯一の方法は、同じ人が同じメッセージを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のいずれかの文字列としてハッシュし、そのコンテンツを表す文字列を取得します。 1人のユーザーによる複数のメッセージが異なるハッシュを取得することを確認するには、非表示のタイムスタンプなどを使用します。 setIntervalコールバックでこれを行う場合は、良いことが必要です。

Answer 4

それを強くをお勧めしませんが、jQueryの追記機能に結びつけることPaul Irish's Duck punchingメソッドを使用することも可能である - あなたは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); 

この方法では、タイミングループは不要です。