My chat website(php+ajax) makes my browser stuck - php

Question

This is the script I use for various purposes like scrolling, getting the data from php etc:
<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>
This is the PHP code I use to get the chats from database:
<?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);
?>
What may be the reason for the problem? Is it the page refresh that happens every 1.5 seconds or something else?

Answer 1

This is just to give you an idea, it is not tested.
<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>