我的聊天网站(php + ajax)让我的浏览器卡住了

时间:2014-08-04 11:40:25

标签: php ajax chat

这是我用于各种目的的脚本,例如滚动,从php等获取数据:

<script>
$(document).ready(function(){
  $("#full_chat").animate({ scrollTop: $('#full_chat')[0].scrollHeight+1000}, 1500);
  setInterval(function refreshPage() { 
     var user=$("#head").text();
     $.post("retrieve.php",{ user:user }, function(data,status){
        if($.trim(data)!="0"){
            $("#full_chat").append("<span class='you'>"+data+"</span>");
            $('#full_chat').emoticonize();
            window.onblur = function () {
                $('#full_chat').bind("DOMSubtreeModified",function(){
                    $.titleAlert("New Message!", {
                        requireBlur:true,                                               
                        stopOnFocus:true,
                        //duration:10000,                                               
                        //interval:500
                    });
                });
            }
        }
  }); }, 1500);


$("#form").on('submit',function (e) {
    e.preventDefault();
    var user=$("#head").text();
    var dt = new Date();
    var time = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();

    var txt= $("#chat_input").val();
    $.post("chat.php",{ txt:txt,user:user,time:time },function(data,status){
        if(data=="OFFLINE"){
            $("#full_chat").append("User not available right now<br>");
        }else{
            $("#full_chat").append("("+time+")  ").append("<span class='me'>"+"Me: "+txt+"</span><br>").emoticonize({delay: 1,animate:false});
        }
    });

    $("#full_chat").animate({ scrollTop: $('#full_chat')[0].scrollHeight+1000}, 1500);
        $('#chat_input').val('');
    });

});
</script>

这是我用来从数据库中获取聊天记录的PHP代码:

<?php 
session_start();
$other_user=$_POST['user'];
$flag=$_POST['flag'];
include_once('db.php');

$uname=$_SESSION['username'];
//date_default_timezone_set('Asia/Kolkata');

$q="select message,sender,time from chat where username='$uname' and delivered=0  and sender='$other_user' order by time ASC";
$qe = mysqli_query($con,$q);
$q1="UPDATE chat SET delivered=1  WHERE username='$uname' and sender='$other_user'" ;
$qe1 = mysqli_query($con,$q1);
if($r=mysqli_fetch_array($qe)) {
    echo "(".$r['2'].")  ". $r['1'].": ".$r['0']."<br>";
}else {
    echo "0";   
}
mysqli_close($con); 
?>

问题可能是什么原因?是每1.5秒发生一次页面刷新还是别的什么?

1 个答案:

答案 0 :(得分:0)

这只是为了给你一个想法,它没有经过测试。

<script>
$(document).ready(function() {
var user = $("#head").text();
var postTimeout = 0;
var refreshPage = function(postInterval, postData) {
    $.post("retrieve.php", postData, function(data, status) {
        if (!postTimeout) {
            postTimeout = setTimeout(function() {
                refreshPage(postInterval, postData);
                postTimeout = 0;
            }, postInterval);
        }
        if ($.trim(data) != "0") {
            $("#full_chat").append("<span class='you'>" + data + "</span>");
            $('#full_chat').emoticonize();
            window.onblur = function() {
                $('#full_chat').bind("DOMSubtreeModified", function() {
                    $.titleAlert("New Message!", {
                        requireBlur: true,
                        stopOnFocus: true,
                        //duration:10000,                                               
                        //interval:500
                    });
                });
            }
        }
    });
}
$("#full_chat").animate({
    scrollTop: $('#full_chat')[0].scrollHeight + 1000
}, 1500);

refreshPage(1500, {user: user});


$("#form").on('submit', function(e) {
    e.preventDefault();
    var user = $("#head").text();
    var dt = new Date();
    var time = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();

    var txt = $("#chat_input").val();
    $.post("chat.php", {
        txt: txt,
        user: user,
        time: time
    }, function(data, status) {
        if (data == "OFFLINE") {
            $("#full_chat").append("User not available right now<br>");
        } else {
            $("#full_chat").append("(" + time + ")  ").append("<span class='me'>" + "Me: " + txt     + "</span><br>").emoticonize({
                    delay: 1,
                    animate: false
                });
            }
        });

        $("#full_chat").animate({
            scrollTop: $('#full_chat')[0].scrollHeight + 1000
        }, 1500);
        $('#chat_input').val('');
    });

});
</script>