AJAX Requests Causing Timeouts

Question

I am not very proficient with AJAX requests, but I have this simple script in my header:

    function refresh_div() {
    jQuery.ajax({
        url:'progress.php?game=<?php echo $gamename; ?>',
        type:'POST',
        success:function(results) {
            jQuery(".middle").html(results);
        }
    });
}

    t = setInterval(refresh_div,1000);

and then in the progress.php file I have quite a few mysql requests from my db, the purpose of which is to refresh the page with this php data every second. This works fine most times, but what I am finding however is that whenever I call this script a few times back to back simultaneously, I am getting timeout errors and the page wont load. This is all for a browser based game which includes a timer which counts down every second so it is important I find something that will be stable executing php requests every second.

Added progress.php:

<?php



session_start(); 
$username = $_SESSION["username"];


$gamename = $_GET['game'];



require "../connections/games.php";

$newgamesql = "SELECT * FROM gamelist WHERE name = '$gamename'";
$newgamequery = mysql_query($newgamesql, $gamesdbhandle);

$newgamecount = mysql_num_rows($newgamequery);

$gamenamenospaces = str_replace(' ','_', $gamename);

$gamestatus = mysql_result($newgamequery, 0, 'status'); 

$numberofplayers = mysql_result($newgamequery, 0, 'numberofplayers'); 


$player1 = mysql_result($newgamequery, 0, 'player1');
$player2 = mysql_result($newgamequery, 0, 'player2');
$player3 = mysql_result($newgamequery, 0, 'player3');
$player4 = mysql_result($newgamequery, 0, 'player4');
$player5 = mysql_result($newgamequery, 0, 'player5');
$player6 = mysql_result($newgamequery, 0, 'player6');
$player7 = mysql_result($newgamequery, 0, 'player7');
$player8 = mysql_result($newgamequery, 0, 'player8');

$rounds = mysql_result($newgamequery, 0, 'rounds'); 

$currentround = mysql_result($newgamequery, 0, 'currentround'); 

$gametimestamp = mysql_result($newgamequery, 0, 'actualtime'); 

$headmaster = mysql_result($newgamequery, 0, 'headmaster'); 

$roundtime = mysql_result($newgamequery, 0, 'time'); 

$activeplayers = mysql_result($newgamequery, 0, 'activeplayers'); 

$numberofplayers = mysql_result($newgamequery, 0, 'numberofplayers'); 

$roundtimeproper = strtotime("H:i:s" , $roundtime);

//Round time conversion goes here: 

//The specific table query for the individual rounds


$thegamesql = "SELECT * FROM `$gamenamenospaces` WHERE id='$currentround' LIMIT 1";
$thegamequery = mysql_query($thegamesql, $gamesdbhandle);


$echocurrentround = mysql_num_rows($thegamequery) + 1;

$thisroundplayer1 = mysql_result($thegamequery, 0, "player1card");
$thisroundplayer2 = mysql_result($thegamequery, 0, "player2card");
$thisroundplayer3 = mysql_result($thegamequery, 0, "player3card");
$thisroundplayer4 = mysql_result($thegamequery, 0, "player4card");
$thisroundplayer5 = mysql_result($thegamequery, 0, "player5card");
$thisroundplayer6 = mysql_result($thegamequery, 0, "player6card");
$thisroundplayer7 = mysql_result($thegamequery, 0, "player7card");
$thisroundplayer8 = mysql_result($thegamequery, 0, "player8card");

$thisroundwhitecard = mysql_result($thegamequery, 0, "whitecard");
$thisroundwhitecard = str_replace("_", "_____", $thisroundwhitecard);


$thisroundtime = mysql_result($thegamequery, 0, "timestamp");



$now = new DateTime();
$target = DateTime::createFromFormat('H:i:s', $gametimestamp);
$difference = $now->diff($target);

$difference = $difference->format("%I:%S");


//Display the timer

echo '<div id="timer">';
echo 'TIME:';
echo '<br />';
echo $difference; 
echo '</div>';
//echo $timer; 



//State which round

echo '<div id="toptitle">';
echo $gamename; 
echo ' - ';
echo 'Round ';
echo $currentround;
echo '</div>';

if ($gamestatus == 'active') {
//Game is live, display things

echo '<div id="placeholderplaceholder">';


//The card submit bar

if (!empty($player1)) { 

if (!empty($player1card)) {

echo '<div class="blackcardplaceholderplaced">';

}else{

echo '<div class="blackcardplaceholder">';

}

echo 'P1';


echo '</div>';

}

if (!empty($player2)) { 

if (!empty($player2card)) {

echo '<div class="blackcardplaceholderplaced">';

}else{

echo '<div class="blackcardplaceholder">';  

}

echo 'P2';


echo '</div>';

}

if (!empty($player3)) {

if (!empty($player3card)) {

echo '<div class="blackcardplaceholderplaced">';

}else{ 

echo '<div class="blackcardplaceholder">';  

}

echo 'P3';


echo '</div>';

}

if (!empty($player4)) { 

if (!empty($player4card)) {

echo '<div class="blackcardplaceholderplaced">';

}else{

echo '<div class="blackcardplaceholder">';  

}

echo 'P4';


echo '</div>';

}

if (!empty($player5)) { 

if (!empty($player5card)) {

echo '<div class="blackcardplaceholderplaced">';

}else{

echo '<div class="blackcardplaceholder">';  

}

echo 'P5';


echo '</div>';

}

if (!empty($player6)) { 

if (!empty($player6card)) {

echo '<div class="blackcardplaceholderplaced">';

}else{

echo '<div class="blackcardplaceholder">';  

}

echo 'P6';


echo '</div>';

}

if (!empty($player7)) { 

if (!empty($player7card)) {

echo '<div class="blackcardplaceholderplaced">';

}else{

echo '<div class="blackcardplaceholder">';  

}

echo 'P7';


echo '</div>';

}

if (!empty($player8)) { 

if (!empty($player8card)) {

echo '<div class="blackcardplaceholderplaced">';

}else{

echo '<div class="blackcardplaceholder">';  

}

echo 'P8';


echo '</div>';

}

echo '</div>';



if ($headmaster == $username) {
//You are the headmaster, show the judge view

echo '<br />Your turn to <div id="headmaster">Judge</div><br /><br />';

if(!empty($thisroundwhitecard)) {
echo '<div class="bigwhitecard">';
echo $thisroundwhitecard; 
echo '</div>';
}


}else{
//You are not the headmaster, show the player view  

//Randomly generate 5 cards

require '../dbauth/cards.inc.php';
    $cardsdbhandle = mysql_connect(

    $cardshostname, 
    $cardsusername, 
    $cardspassword

    ) or die("INVALID USERNAME OR PASSWORD");

    $cardsselected = mysql_select_db($cardsdbname, $cardsdbhandle);

$newblackcardsql = "SELECT * FROM black LIMIT 5";
$newblackcardquery = mysql_query($newblackcardsql, $cardsdbhandle);

$newblackcardcount = mysql_num_rows($newblackcardquery);

$c = 0; 

if ($newblackcardcount > 0) {

    echo '<div class="blackcardscroller">';
    echo '<div class="blackcardscrollerinner">';

while ($c < $newblackcardcount) {

$blackcardid = mysql_result($newblackcardquery, $c, "id");
$blackcardtext = mysql_result($newblackcardquery, $c, "text");


echo '<div class="gameblackcard">';
echo $blackcardtext;

echo '<div class="blackcardbtn" id="';
echo $blackcardid; 
echo '">PICK CARD</div>';   
echo '</div>';

$c++; 

}

echo '</div>';
echo '</div>';

}else{
//There are no black cards

echo 'There are no black cards to pick from! Something went wrong...';

}

echo '<br />Judge: <br />';
echo '<div id="headmaster">';
echo $headmaster;
echo '</div>';





if(!empty($thisroundwhitecard)) {
echo '<div class="bigwhitecard">';
echo $thisroundwhitecard; 
echo '</div>';
}



}

}



?>

If the server-side code is taking too long to respond then it sounds like the problem is with the server-side code. There's nothing in the code shown which would cause that. Though making a request *every second* certainly isn't the best idea. You might want to take a look at web sockets for sending real-time data from the server to the client. — David, Mar 03 '17 at 23:42
Do you get any errors from `php`? Please add them to your question. — ventiseis, Mar 03 '17 at 23:44
Every second is rather frequent. In any case wouldn't you wait for the previous request to return something before requesting again? (By putting the call to the function inside the success function and not in a setinterval.) — Popnoodles, Mar 03 '17 at 23:46
The server side code is rather extensive, but I will add it. No, I do not get any php errors. — Dustin, Mar 03 '17 at 23:55

score 1 · Accepted Answer · answered Mar 03 '17 at 23:48

1

You should not use setInterval... Do this instead:

function refresh_div() {
    jQuery.ajax({
        url:'progress.php?game=<?php echo $gamename; ?>',
        type:'POST',
        success:function(results) {
            jQuery(".middle").html(results);
            setTimeout(function(){
                refresh_div();
            }, 1000);
        }
    });
}

refresh_div();

answered Mar 03 '17 at 23:48

Ulrik McArdle

601
4
9

This is what I suggested too. It may prevent the timeout errors, if they are caused by overloading the server with a request every second. – Popnoodles Mar 03 '17 at 23:49
No timeout errors yet with this, but in one instance the browser (chrome) produced "ERR_EMPTY_RESPONSE" – Dustin Mar 03 '17 at 23:51
Maybe the return type is wrong. Try adding this: dataType: 'html' right below type: 'POST' – Ulrik McArdle Mar 03 '17 at 23:59

score 0 · Answer 2 · edited May 23 '17 at 11:53

I think you problem in this string

t = setInterval(refresh_div,1000);

You get queries from servers each second, so after 10 seconds there are 10 query in row and this can cause timeouts because server too busy to answer and also it may be some other problems because to much concurrent queries. So i suggest you try use promise(), take look in this post:

in JavaScript, how to wrap a promise in timeout?

AJAX Requests Causing Timeouts

2 Answers2