结果每次显示一个，并有延迟

Results displaying one at a time with a delay

本文关键字：一个延迟显示结果更新时间：2023-09-26

我有下面的代码来打乱我在数据库中的一个选择。我想一次显示一个结果，而不是一次显示所有结果，结果之间有延迟。

ie:

如果我的数据库中有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);
?>

您可以尝试这样做:这只是一个使用伪数据的测试。这和你想要的差不多吗?

Client(使用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);
?>

一种方法是使用CSS隐藏所有结果，然后使用jQuery和CSS逐个显示值和动画。

下面的代码默认隐藏shuffle_results中的所有项目(在CSS中)。然后，jQuery遍历该类中的每个项目并显示元素，然后将其left和bottom属性动画化，以赋予其正确的定位。持续时间用time设置。

旋转动画是用CSS关键帧制作的。

JSFiddle

JS

var time = 3000;
var lineheight = 24;
var angle = 90;
$('.shuffle_results').each(function (i) {
    var i = i;
    var $this = $(this);
    setTimeout(function () {
        $this.show()
            .animate({
            'left': 0 + 'px',
                'bottom': $(document).height() - (lineheight * (i + 1)) + 'px'
        }, {
            duration: time,
            queue: false
        });
    }, time * i);
});

CSS

.shuffle_results {
    display:none;
    position:absolute;
    left:70px;
    bottom:100px;
    z-index:-1;
    -webkit-animation:spin 3s linear;
    -moz-animation:spin 3s linear;
    animation:spin 3s linear;
}
@-moz-keyframes spin {
    0% {
        -moz-transform: rotate(110deg);
    }
    100% {
        -moz-transform: rotate(0deg);
    }
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(110deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
    }
}
@keyframes spin {
    0% {
        -webkit-transform: rotate(110deg);
        transform:rotate(110deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        transform:rotate(0deg);
    }
}
#paperBag {
    position:absolute;
    bottom:0px;
    left:0px;
    z-index:1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="shuffle_results">Michael Jackson</div>
<div class="shuffle_results">Bob Saget</div>
<div class="shuffle_results">Indiana Jones</div>
<div class="shuffle_results">Elmo</div>
<div class="shuffle_results">Elmer J. Fudd</div>
<img id='paperBag' src="http://www.thecuriouscaterpillar.co.uk/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/b/a/bag_to_white.jpg" width="200px" />

编辑
要将它与AJAX一起使用，您可以对JS
执行以下操作
var time = 3000; var lineheight = 24; var angle = 90; var array = ["Michael Jackson", "Bob Saget", "Indiana Jones", "Elmo", "Elmer J. Fudd"]; //For testing purposes. Shows how it adds one item at a time. This 'mimicks' your AJAX script var i=0; var interval = setInterval(function () { j=i; i++; if(array.length<=i) window.clearInterval(interval); // Where array.length is the count returned from PHP (or you can return a boolean value and check if it's true or false. Something like this: //if(clearInt === true) //{ // window.clearInterval(interval); //} //else //{ // Do stuff below $('#paperBag').before("<div class='shuffle_results'>"+array[j]+"</div>"); // Where array[j] represents the value returned from ajax var $this = $('.shuffle_results:last'); $this.show() .animate({ 'left': 0 + 'px', 'bottom': $(document).height() - (lineheight * (j + 1)) + 'px' }, { duration: time }); }, time);
所以你应该有类似这样的东西:(注意，这是未经测试的-如果你遇到任何错误，请随意编辑这个答案)。为了防止重复的结果，您可以将数组从JS函数发送到PHP函数，并从另一个数组中减去一个数组以获得剩余的值(使用数据库行的唯一索引并用这些值填充JS数组，然后减去PHP脚本中所有值的数组以获得剩余值)。(使用array_diff可能:http://php.net/manual/en/function.array-diff.php)

var time = 3000; var lineheight = 24; var angle = 90; var array = []; var interval = setInterval(function () { $getJSON("something.php", {array: array}, function(result) { if(result.clearInterval === true) { window.clearInterval(interval); } else { array.push(result.firstName+" "+result.lastName); $('#paperBag').before("<div class='shuffle_results'>"+result.firstName+" " +result.lastName+"</div>"); var $this = $('.shuffle_results:last'); $this.show() .animate({ 'left': 0 + 'px', 'bottom': $(document).height() - (lineheight * array.length) + 'px' }, { duration: time }); } }); }, time);

相关文章：
如何在一个元素动画之后延迟

如何将一个方法延迟到另一个方法首先完成，javascript

JavaScript/jQuery-添加添加和删除类与下一个函数之间的延迟

在单击下一个按钮之前，在JavaScript代码中添加5秒的延迟

从另一个函数延迟解析的返回

如何在另一个任务中正确使用延迟的gump任务返回的值

jQuery动画的持续时间就像一个延迟

是否有一个Javascript函数可以使代码在运行时延迟

jQuery-在窗口滚动上运行一个函数，没有任何延迟

jQuery/Javascript函数延迟运行，直到另一个函数完成(如果需要）

节点 js 从客户端和另一个节点模块调用相同的延迟函数

在 Javascript/jQuery 中的循环末尾添加一个延迟

如何使用 window.open 创建一个不确定延迟的弹出窗口(用于社交身份验证），而弹出窗口阻止程序会阻止它

我怎样才能使数组一次显示一个延迟

使用$(“[property=value]”）.click(），我希望两次单击之间有一个延迟

跳过一个延迟的对象

jQuery鼠标悬停函数对多个元素执行一个延迟

如何在函数中使用何时按顺序发送文件上传，这也是一个延迟承诺

是否有一个延迟的javascript下载/解释，是触发所需的函数被调用

有没有一种方法可以在jQuery中创建一个延迟的对象包装器?