更新HTML不能与setInterval一起使用

Question

我收到使用ajax的请求：

$.get("Data3.php", function (data8) {
    $(".data2").replaceWith(data8);
});

这是每隔0.5秒在我的数据库中输出类似的东西：

<div class="hide" id="826">Foo</div>
<div class="hide" id="825">Foo</div>
<div class="hide" id="824">Foo</div>
<div class="hide" id="823">Tramp</div>
<div class="hide" id="822">Foo</div>
<div class="hide" id="821">Foo</div>
<div class="hide" id="820">Tramp</div>
<div class="hide" id="819">Foo</div>
<div class="hide" id="818">Tramp</div>
<div class="hide" id="817">Tramp</div>

我希望找到包含“Tramp”的最新div id :(其中“Tramp”是$_SESSION name $name）

$("#lastspoke").html($("div.hide:contains('<?php echo $name?>')").attr('id'));

然后输出id：

$("#lastspoke").text();

---

一起：

window.setInterval(function () {
    $.get("Data3.php", function (data8) {
        console.log(data8);
        $(".data2").replaceWith(data8);
    });

    $("#lastspoke").html($("div.hide:contains('<?php echo $name?>')").attr('id'));
    $("#lastspoke").text();
}, 500);

---

为什么#lastspoke仅在开头更新？

---

完整代码

<? session_start();
session_start();
if (isset($_POST['enter'])) {
    if ($_POST['name'] != "") {
        $_SESSION['name'] = stripslashes(htmlspecialchars($_POST['name']));
    }
}
$name = ucwords(strtolower($_SESSION['name']));

?> < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < html xmlns = "http://www.w3.org/1999/xhtml" > < head > < link rel = "stylesheet"
href = "http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" > < script src = "http://code.jquery.com/jquery-1.8.3.min.js" > < /script>
<script src="http:/ / code.jquery.com / mobile / 1.3.2 / jquery.mobile - 1.3.2.min.js "></script>

<title class="
title ">Untitled Document</title>
<style>
#lastspoke{
display:none;
}
.hide{
    display:none;
}
.text{
    text-align:left;
    color:#000; font-size:26px;
    width:100%;
}
.name{

    text-align:left;color:#069; font-size:36px;
    }
    .time{
        text-align:right;
    }
    #formheight{
        opacity:0.8;
    }
.border_bottom{
     border-bottom: 1px solid #454;
     width:100%;
     display: table;
}
html, body {
  overflow: hidden;
}
tbody {
    overflow: auto;
}


thead > tr, tbody{
    display:block;
    }
.old{
    display:none;
}
.new{
    display:none;
}

.chatty{
    font-size:26px;
    position:absolute;
    width:100%;
    bottom: 0px;
}

</style>

<script>

//---------------------
//focus on form function.
//---------------------
function setFocusToTextBox(){
    document.getElementById("
usermsg ").focus();
}
//---------------------
//scroll to bottom function.
//---------------------
function scrolltobottom() {
    var elem = document.getElementById('data');
    elem.scrollTop = elem.scrollHeight;
    $( "
span: contains('<?php echo $name ?>')" ).css("
color ","#bc2122 ");
}
//---------------------
//sending message
//---------------------
$(document).ready(function () {
    setFocusToTextBox();
    $('form').bind('submit', function () {
        $.ajax({
            type: 'post',
            url: "
Write - to.php ",
            data: $("
form ").serialize(),
            success: function () {
               $.get("
Data.php ", function (data1) {
               console.log(data1);
                    $(".data ").html(data1);
                    scrolltobottom();
                    setFocusToTextBox();
                    $("#usermsg ").val("
");
                });
                    $('.submited').show();
                $('.submited').html("
S E N T ");
                $("#usermsg ").val("
");

                setTimeout(function () {
                    $('.submited').fadeOut(1000);
                }, 2000);  
            }
        });

        return false;
    });


    //---------------------
    //format page dimensions on load
    //---------------------
    var heighty = $(window).height();
    var height = $('#formheight').height();
    $(".height ").css("
height ", height*(5/8) + "
px ");
    $(".height ").css("
height ", heighty - height*1.5 + "
px ");

    //---------------------
    //create old number on load
    //---------------------
    $.get("
Data2.php ", function (data2) {
        var id_number = data2;
        $(".old ").text(id_number);
    });
    //---------------------
    //update page on load
    //---------------------
    $.get("
Data.php ", function (data3) {
        $(".data ").html(data3);
        console.log(data3);
        scrolltobottom();
        setFocusToTextBox();
    });

});
</script>
</head>

<body>

<script>
//---------------------
//if on standard phones update every 5 seconds where as if on anything else (eg. computer) it updates every second.
//---------------------
if (/Android|webOS|iPhone|IEMobile|Opera Mini/i.test(navigator.userAgent)) {

    $('meta[name=viewport]').attr('content', 'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1');

    window.setInterval(function () {
        $.get("
Data2.php ", function (data4) {
            var new_id_number = data4;
            $(".new ").text(new_id_number);
        });
        //---------------------
        //if new number is different to old number update data and scroll to bottom.
        //THIS IS THE MOST LIKELY THING TO HAVE PROBLEMS!!.
        //---------------------
        if ($('.new').text() !== $('.old').text()) {

            $.get("
Data.php ", function (data5) {
                $(".data ").html(data5);
                scrolltobottom();
            });
            $('.old').text($('.new').text());
        }
    }, 5000);
} else {
    //---------------------
    //update new number every second
    //---------------------
    window.setInterval(function () {
        $.get("
Data2.php ", function (data6) {
            var new_id_number = data6;
            $(".new ").text(new_id_number);
        });
        //---------------------
        //if new number is different to old number update data and scroll to bottom.
        //THIS IS THE MOST LIKELY THING TO HAVE PROBLEMS!!.
        //---------------------
        if ($('.new').text() !== $('.old').text()) {

            $.get("
Data.php ", function (data7) {

                console.log(data7);
                $(".data ").html(data7);
                scrolltobottom();
                setFocusToTextBox();
            });
            $('.old').text($('.new').text());
        }

        var neW = $('.new').text();
        console.log("
new " + neW);
        $.get("
Data3.php ", function (data8) {
            console.log(data8);
            $(".data2 ").html(data8);
        }).done(function () {
            $("#lastspoke ").html($("
div.hide: contains('<?php echo $name?>')").attr('id'));
        });
        var late = $("#lastspoke ").text();
            console.log("
Late "+late);
            var numbertry = neW - late;
            $(".title ").html(numbertry);
        console.log("
numbertry "+numbertry);

    }, 500);
}






</script>
<?php
//THIS AREA FINDS THE SESSION
if ($name != "
Pidge " && $name != "
Tramp " ){
    echo '<script> window.location.replace("
public / Chat.php ");</script>';
}



//------------------------------

//THIS AREA REDIRECTS TO THE SIGN IN PAGE IF THERE IS NO SESSION IN PROGRESS

if (strlen($name) <1){
    echo '<script> window.location.replace("
Sign - in .php ");</script>';
    }
    echo "
Hello < a href = 'Sign-in.php' > " . $name." < /a>!";

/ / ------------------------------

?> < table class = "height"
width = "80%"
border = "0"
align = "center"
style = "height: 390px;" > < tbody id = "data"
class = "height data"
style = "height: 390px; width:100%;" >

< /tbody>
</table > < table align = "center"
class = "chatty"
border = "0" > < tr > < th scope = "col" > < div align = "center" > < form id = "formheight"
action = "Write-to.php"
method = "post" > < input autocomplete = "off"
name = "txt"
type = "text"
id = "usermsg"
style = "font-size:24px;"
value = ""
size = "100%"
width = "100%" / > < br / > < button name = "submit"
id = "submitmsg"
style = "text-align:center;"
type = "submit" > send < /button>

    </form > < span class = "submited" > < /span>
</div > < /th>
  </tr > < /table>

<span id="lastspoke"></span > < span class = "data2" > < /span>
<span class="old"></span > < span class = "new" > < /span><br / > < /body>
</html >

Answer 1

window.setInterval(function () {
 $.get("Data3.php", function (data8) {
    console.log(data8);
    $(".data2").replaceWith(data8);
 }).done(function(){
    $("#lastspoke").html($("div.hide:contains('<?php echo $name?>')").attr('id'));
    $("#lastspoke").text();
 });
}, 500);

如果要在.get完成后更新#lastspoke，请使用.done函数。

Answer 2

function myFunction()
{
$(function () {
    $.get("Data3.php", function (data8) {
        console.log(data8);
        $(".data2").replaceWith(data8);
    });

    $("#lastspoke").html($("div.hide:contains('<?php echo $name?>')").attr('id'));
    $("#lastspoke").text();
});
}

<script> 
setInterval("myFunction()",500);
</script>