我如何测试看是否 <DIV> 内容在显示之前已更改

Question

Ive got a div with the id "responsecontainer" and I want to load a page. If the contents of the DIV have changed then update the DIV otherwise just leave it the same.

Here is my code, which doesnt work;

<script>
$(document).ready(function () {
    $("#responsecontainer").load("qr.asp");
    var refreshId = setInterval(function () {
        $.get("qr.asp?randval=" + Math.random(), function (result) {
            var newContent = $('.result').html(result);
            if (newContent != $("#responsecontainer")) {
                $("#responsecontainer").html(result);
            };
        });
    }, 5000);
    $.ajaxSetup({
        cache: false
    });
});
</script>

Answer 1

This:

if (newContent != $("#responsecontainer")) {

Should be this:

if (newContent != $("#responsecontainer").html()) {

Answer 2

I wouldn't rely on .html() representations for string comparison.

The browser decides how the HTML string should be rendered, and the developer won't be able to have any control if the browser decides it should be displayed differently one time.

You should have a variable that is accessible to each interval invocation, and do a string comparison between the old and new responses.

$(document).ready(function () {

    var prev_response;

    $("#responsecontainer").load("qr.asp", function(resp) {
        prev_response = resp;
    });

    var refreshId = setInterval(function () {
        $.get("qr.asp?randval=" + Math.random(), function (result) {

            if (prev_response !== result) {
                prev_response = result;
                $("#responsecontainer").html(result);
            }
        });
    }, 5000);
    $.ajaxSetup({
        cache: false
    });
});