Question

So i have a “show recent” pictures div on my website which i would to to refresh content every 20 seconds, to show a new picture. The problem is that my current ajax call refreshes itself instantely, not after 20 seconds and when it refreshes it doesnt delete the previous data, so it lists all the 1000+ pictures.

here is my ajax call:

$(window).load(function(){
    var timer = 0;
    for (x =0; x<=20; x++)
    {
        timer++;
        if(timer == 20 || x == 20)
        {
            //create XMLHttpRequest object
            xmlHttpRequest = (window.XMLHttpRequest) ?
                new XMLHttpRequest() : new ActiveXObject("Msxml2.XMLHTTP");

            //If the browser doesn't support Ajax, exit now
            if (xmlHttpRequest == null)
                return;

            //Initiate the XMLHttpRequest object
            xmlHttpRequest.open("GET", "../php/rotalas.php", true);

            //Setup the callback function
            xmlHttpRequest.onreadystatechange = updt_pictures;

            //Send the Ajax request to the server with the GET data
            xmlHttpRequest.send(null);
        }
        function updt_pictures()
        {
            if(xmlHttpRequest.readyState == 4)
            {
                document.getElementById('friss_kepek').innerHTML = xmlHttpRequest.responseText;
            }
        }
    }

and here is the called php which lists the new files

<?php
$timer = 0;
for($x = 0; $x < 20; $x++)
{
    if($timer == 20 OR $x==20)
    {
        $timer = 0;
        $x= 0;
    }
}

$x = 1;
while($x >=$timer)
{
$imgdir = '../img/blog/img/amator/Amator_thumb/'; //Pick your folder .. images

$i=0;

$dimg = opendir($imgdir);//Open directory
while($imgfile = readdir($dimg))
{
    if( in_array(strtolower(substr($imgfile,-3)),$allowed_types) OR
        in_array(strtolower(substr($imgfile,-4)),$allowed_types) )
        /*If the file is an image add it to the array*/
    {$a_img[] = $imgfile;}
    if ($imgfile != "." && $imgfile!="..")
    {
        $imgarray[$i]=$imgfile;
        $i++;
    }

closedir($imgdir);

$totimg = count($a_img);  //The total count of all the images .. img_coun

for($x=$page*1; $x < $totimg && $x < ($page+1)*1; $x++){
    $rand=rand(0,count($imgarray)-1);
    if($rand >= 0)
    {
        echo '<img class="kep_listaz" src="../img/blog/img/amator/Amator_thumb/'.$imgarray[$rand].'" width="160" height="140">';
    }}

i tried to use sleep(20) at the end of the loop, but it didnt refresh at all.

Thanks!

Answer 1

Javascript won’t run the “++” operator once per second – it will run it twenty times, very fast. You should use the setInterval function to get the js to only call every 20 seconds:

http://www.w3schools.com/jsref/met_win_setinterval.asp

Change your JS (Untested!!!):

$(window).load(function(){
    setInterval(function(){
        //create XMLHttpRequest object
        xmlHttpRequest = (window.XMLHttpRequest) ?
            new XMLHttpRequest() : new ActiveXObject("Msxml2.XMLHTTP");

        //If the browser doesn't support Ajax, exit now
        if (xmlHttpRequest == null)
            return;

        //Initiate the XMLHttpRequest object
        xmlHttpRequest.open("GET", "../php/rotalas.php", true);

        //Setup the callback function
        xmlHttpRequest.onreadystatechange = function(){
            if(xmlHttpRequest.readyState == 4){
                document.getElementById('friss_kepek').innerHTML = xmlHttpRequest.responseText;
            }
        };

        //Send the Ajax request to the server with the GET data
        xmlHttpRequest.send(null);
    }, 20000); //Run every 20000ms
}

Edit: and your PHP should be something like this:

$imgdir = '../img/blog/img/amator/Amator_thumb/'; 

$i=0;

$dimg = opendir($imgdir);//Open directory
while($imgfile = readdir($dimg))
{
    if( in_array(strtolower(substr($imgfile,-3)),$allowed_types) OR
        in_array(strtolower(substr($imgfile,-4)),$allowed_types) )
        /*If the file is an image add it to the array*/
    {$a_img[] = $imgfile;}
    if ($imgfile != "." && $imgfile!="..")
    {
        $imgarray[$i]=$imgfile;
        $i++;
    }
}
closedir($imgdir);

$totimg = count($a_img);  //The total count of all the images .. img_coun

for($x=$page*1; $x < $totimg && $x < ($page+1)*1; $x++){
    $rand=rand(0,count($imgarray)-1);
    if($rand >= 0)
    {
        echo '<img class="kep_listaz" src="../img/blog/img/amator/Amator_thumb/'.$imgarray[$rand].'" width="160" height="140">';
    }
}

I haven’t tested this at all, but the general idea should be there. The javascript uses setInterval to make an AJAX call every 20s, then the PHP instantly responds with some images. It’s up to you to figure out how to get just the images you want.

The thing to take away from this is: Don’t use for loops for timing! That’s something called CPU limiting which is something that shouldn’t be done unless you really really know what you’re doing.

Good luck!