javascript - 一次显示一个结果，但有延迟

Question

我有以下代码，可以对数据库中的选择进行洗牌。我不想一次显示所有结果，而是一次显示一个结果，并在结果之间有一个延迟。

即:

如果我的数据库中有 10 个项目，我希望显示一个项目，然后延迟 3 秒，然后显示第二个项目，然后显示 3 秒结果，一直到最后一个项目 (#10)。然后可能是某种动画，例如飞入屏幕或从袋子或其他东西中取出元素的外观。 (想象一下从袋子里挑选 10 个编号的订单)。

有人告诉我 setInterval() 可能是一种方法，但我不知道如何使用我的代码使其工作，或者这是否是正确的方法。

我怎样才能做到这一点？

这是我如何打乱数据库结果的方法。

<form method="post"> 
<?php    
    foreach ($array as $result) { 
        $shuffle_firstname = htmlentities($result['firstname']); 
        $shuffle_lastname = htmlentities($result['lastname']); 
        $shuffle_id = htmlentities($result['id']); 
        $shuffle_username = htmlentities($result['username']); 
        $shuffle_email = htmlentities($result['email']); 
?> 
        <div class="shuffle_results"><?php echo $shuffle_firstname . ' ' . $shuffle_lastname; ?></div> 
        <input type="hidden" name="firstname[]" value="<?php echo $shuffle_firstname; ?>"> 
        <input type="hidden" name="lastname[]" value="<?php echo $shuffle_lastname; ?>"> 
        <input type="hidden" name="id[]" value="<?php echo $shuffle_id; ?>"> 
        <input type="hidden" name="username[]" value="<?php echo $shuffle_username; ?>"> 
        <input type="hidden" name="email[]" value="<?php echo $shuffle_email; ?>"> 
    <?php 
    } 
?>   
         <input type="submit" value="Finalize Draft Order" name="insert"> 
    </form>

更新:

HTML 文件

$query = mysqli_query($con, "SELECT * FROM users WHERE `group` = 3");

echo 'Users to be given draft order: <br>';
$array = array();
while ($row = mysqli_fetch_assoc($query)) {
    $array[] = $row;
    echo $row['firstname'] . ' ' . $row['lastname'] . '<br>';
}
?>
<form method="POST" name="form">
<input type="submit" value="Create Draft Order" name="shuffle">

Shuffled results: <br>
<div id="results"></div>
<form method="post">

     <input type="submit" value="Finalize Draft Order" name="insert">
</form>
<img id='paperBag' src="http://www.thecuriouscaterpillar.co.uk/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/b/a/bag_to_white.jpg" width="200px" />
//Test Shuffle
var displayResults = function(data){
    var i = 0;
    var interval = setInterval(function(){ 
    if( i <= data.length){ 
    console.log( data[i] ); 
    //i++; 
            $('#results').append('<div class="result" style="display:none;">' +
                        '<div class="shuffle_results">' + data[i].firstname + ' ' + data[i].lastname + '</div>' + 
                        '<input type="hidden" name="firstname[]" value="' + data[i].firstname + '">' +
                        '<input type="hidden" name="lastname[]" value="' + data[i].lastname + '">' +
                        '<input type="hidden" name="id[]" value="' + data[i].id + '">' +
                        '<input type="hidden" name="username[]" value="' + data[i].username + '">' +
                        '<input type="hidden" name="email[]" value="' + data[i].email + '">' +
                    '</div>');
            $('.result').fadeIn(200);
            i++;
       } else { 
    clearInterval(interval); 
    } 
    }, 3000); 
    };
$(function(){  
    $('form').on('submit', function(e){
        e.preventDefault();
       $.post('shuffle_results.php', function(data){ 
        var o = $.parseJSON(data); 
        displayResults(o); 
        });
        });
    });
//End test shuffle

PHP 文件

<?php
$con = mysqli_connect("localhost", "", "", "");
$query = mysqli_query($con, "SELECT * FROM users WHERE `group` = 3");
$array = array();

while ($row = mysqli_fetch_assoc($query)) {
    $array[] = $row;

    if (isset($_POST['shuffle'])) {
    shuffle($array);
    }
    }
    echo json_encode($array);
?>

Answer 1

您可以尝试类似 this 的内容:这只是在 fiddle 中使用虚假数据的测试。这接近您要寻找的吗？

客户端(使用 ctwheels 的 CSS)

<form method="POST">
    <input type="submit" value="Shuffle" name="shuffle">
</form>
<div id="#results"></div>

<script>
var displayResults = function(data){
    var i = 0;
    var interval = setInterval(function(){
        if( i <= data.length){
            $('#results').append('<div class="result" style="display:none;">' +
                        '<div class="shuffle_results">' + data[i].firstname + ' ' + data[i].lastname + '</div>' + 
                        '<input type="hidden" name="firstname[]" value="' + data[i].firstname + '">' +
                        '<input type="hidden" name="lastname[]" value="' + data[i].lastname + '">' +
                        '<input type="hidden" name="id[]" value="' + data[i].id + '">' +
                        '<input type="hidden" name="username[]" value="' + data[i].username + '">' +
                        '<input type="hidden" name="email[]" value="' + data[i].email + '">' +
                    '</div>');
            var $this = $('.shuffle_results:last');
            $this.show().animate({
                'left': 0 + 'px',
                'bottom': $(document).height() - (lineheight * array.length) + 'px'
            }, {
                duration: time
            });
            i++;
        } else {
            clearInterval(interval);
        }
    }, 3000);
};
$(function(){  
    $('form').on('submit', function(e){
        e.preventDefault();
        $.getJSON('path-to-your-script.php', function(data){
            displayResults(data);
        });
    });
});
</script>

服务器

<?php
$con = mysqli_connect("localhost", "", "", "");
$query = mysqli_query($con, "SELECT * FROM users WHERE `group` = 3");
$array = array();
while ($row = mysqli_fetch_assoc($query)) {
    $array[] = $row;
}
echo json_encode($array);
?>