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/

明らかに、この方法は機能しておらず、まったく正確ではありません。これを行う/達成するためのより良い/異なるものはありますか?

助けてくれてありがとう、私は約1週間これをより良くする方法を見つけようとしてきましたが、これに対する修正を見つけることができず、この問題を適切な場所に投稿したいと思っています.適切な時に。

4

4 に答える 4

7

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.");
});

Fiddle (IE < 8 ではテストされていません)

注:コメントに記載されているように、ミューテーション イベントは引き続きサポートされていますが、パフォーマンスの低下とさまざまなブラウザー間での非互換性のために、W3C によって非推奨として分類されています。したがって、上記のソリューションのいずれかを使用し、DOM ミューテーションのみを使用することをお勧めします。他に方法がないときのイベント。

于 2012-06-11T01:12:14.783 に答える
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フィドル

于 2012-06-11T01:22:58.967 に答える
1

crc32 または md5 ハッシュを使用して、データが変更されたかどうかを確認します。チェックしたいdivのhtmlコンテンツを取得し、crc32またはmd5で文字列としてハッシュすると、そのコンテンツを表す文字列が取得されます。非表示のタイムスタンプなどを使用して、1 人のユーザーによる複数のメッセージが異なるハッシュを取得するようにします。setInterval コールバックでこれを行うと、うまくいくはずです。

于 2012-06-11T01:58:36.110 に答える
0

あまりお勧めできませんが、ポール アイリッシュのダック パンチングメソッドを使用してjQueryの追加機能に結び付けることも可能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 に答える