0

だから私は私のウェブサイトに「最近の写真を表示する」divを持っています。これは20秒ごとにコンテンツを更新して新しい写真を表示します。問題は、現在のajax呼び出しが、20秒後ではなく、即座に更新され、更新しても前のデータが削除されないため、1000枚以上の画像がすべて一覧表示されることです。

これが私のajax呼び出しです：

$(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;
            }
        }
    }

これが、新しいファイルを一覧表示するphpと呼ばれるものです。

<?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">';
    }}

ループの最後でsleep（20）を使おうとしましたが、まったく更新されませんでした。

ありがとう！

4

2 に答える 2

1

Javascriptは、「++」演算子を1秒に1回実行しません。これは、非常に高速に20回実行されます。setInterval関数を使用して、jsが20秒ごとにのみ呼び出すようにする必要があります。

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

JSを変更します（テストされていません!!!）：

$(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
}

編集：そしてあなたのPHPはこのようなものでなければなりません：

$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">';
    }
}

私はこれをまったくテストしていませんが、一般的な考え方はそこにあるはずです。javascriptはsetIntervalを使用して20秒ごとにAJAX呼び出しを行い、PHPは即座にいくつかの画像で応答します。必要な画像だけを取得する方法を理解するのはあなた次第です。

これから取り除くべきことは次のとおりです。タイミングのためにforループを使用しないでください！これはCPU制限と呼ばれるもので、自分が何をしているのかを本当に理解していない限り、実行すべきではありません。

幸運を！

于 2012-07-12T23:40:29.417 に答える
1

Ertyが述べたように、コードは20倍高速に実行されるため、基本的に一度に20個のリクエストを送信します。20秒のタイムアウトで再帰関数を設定できる場合。

元：

function updatePic(counter){
  setTimeout(function(){
    //do ajax call and you can use counter to determine what picture to return
    updatePic(counter++);
  }, 20000);
}

PHP側にはタイマー関連のものは必要ありません。setTimeout（）の外部または内部でajax呼び出しを実行できることに注意してください-最初のループで何をしたいかによって異なります（関数を呼び出してから20秒待ってからajax呼び出しを行うか、20秒ごとにajax呼び出しを行います。最初の1つは、関数を呼び出すとすぐに発生します）。

より良いオプションは、javascript/jqueryにスライドショープラグインを使用することです。たくさんのオプションがあり、私のお気に入りはサイクルです。

于 2012-07-12T23:51:16.383 に答える