javascript - 一次仅显示数据库中的一项，并按时间周期循环显示其他项

Question

我有一个项目，要在我办公室的主屏幕上显示一些详细信息，但问题是我只想一次显示项目，然后在时间段内循环显示每个项目。

下面是我的 php、Java Sciptis 和索引页。

index.html

<ul></ul>
<script type="text/javascript" src="script/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="script/my_script.js"></script>

获取.php

<?php
        include_once('db.php');

        $sql = "SELECT * FROM employee";
        $res = mysql_query($sql);
        $result = array();

        while( $row = mysql_fetch_array($res) )
            array_push($result, array('ID' => $row[0],
                                      'Name'  => $row[1],
                          'Post' => $row[2]));

        echo json_encode(array("result" => $result));
?>

my_script.js

$(document).ready( function(){
done(); 

});

function done() {
    setTimeout(function() {
        updates();
        done();
        },200);

}

function updates() {
$.getJSON("fetch.php", function(data) {
    $("ul").empty();

    $.each(data.result,function(){
        $("ul").append("<li>ID: "+this['ID']+"</li><li>Name: "+this['Name']+"</li><li>Designation: "+this['Post']+"</li><br />");
    });
}); 
}

这个脚本不是我写的。所以我需要一些帮助由于上面的脚本将显示项目而不刷新它，我想一​​次只显示一个项目。

谢谢!!!

Answer 1

根据您的评论，我认为这对您有用。它在页面加载时获取一次数据，然后无限循环(当到达数据末尾时再次从头开始)。

var i = 0; // index of data to iterate.
var d = null; // where we store the result of the query.
var interval = 1000; // interval in ms.

$(document).ready(function()
{
    // get the data *once* when the page loads.
    $.getJSON('fetch.php', function(data)
    {
        // store the data in the global var 'd'.
        d = data.result;

        // create a recurring call to update().
        setInterval(function()
        {
            update();
        },
        interval);
    });
});

function update()
{
    // if there isn't another element, reset to the first one.
    if (!d[i]) i = 0;

    // remove previous item from page.
    $('ul').empty();

    // add next item to page.
    $("ul")
        .append(
            '<li>ID: ' + d[i]['ID']
            + '</li><li>Name: ' + d[i]['Name']
            + '</li><li>Designation: ' + d[i]['Post']
            + '</li>'
        );

    // increment index for next iteration.
    i++;
}

<小时/>

到达最后一条记录后重新获取的替代版本

var i = 0, // index of data to iterate.
    d = null, // where we store the result of the query.
    x = null, // stored interval so clearInterval() can be used.
    interval = 1000; // interval in ms.


$(document).ready(function()
{
    fetch();
});

function fetch()
{
    // get the data *once* when the page loads.
    $.getJSON('fetch.php', function(data)
    {
        // store the data in the global var 'd'.
        d = data.result;

        // create a recurring call to update().
        x = setInterval(function()
        {
            update();
        },
        interval);
    });
}

function update()
{
    // if there isn't an array element, reset to the first one.
    if (!d[i]) {
        clearInterval(x);
        i = 0;
        fetch();
        return;
    }

    // remove previous item from page.
    $('ul').empty();

    // add next item to page.
    $("ul")
        .append(
            '<li>ID: ' + d[i]['ID']
            + '</li><li>Name: ' + d[i]['Name']
            + '</li><li>Designation: ' + d[i]['Post']
            + '</li>'
        );

    // increment index for next iteration.
    i++;
}