我有以下代码，可以改变我在数据库中的选择。我希望一次只显示一个结果，结果显示结果，而不是将结果全部显示在一个结果上。
即：
如果我的数据库中有10个项目，我想要显示一个项目，然后是3秒延迟，然后显示第二个项目，然后是3秒结果，一直到最后一个项目（＃10）。然后可能是它的某种动画，比如飞到屏幕或从包或其他东西来的物品的外观。 （想想从一个袋子中抽出一个带编号的订单）。
我被告知setInterval（）可能是一种方法，但我不知道如何使用我的代码或者如果这是正确的方法。
我怎么能这样做？
以下是我如何改组db结果。
<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);
?>
答案 0 :(得分：0)
你可以试试像this这样的东西：这只是在小提琴中使用虚假数据的测试。这接近你想要的吗？
客户端（使用ctwheels＆＃39; 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);
?>
答案 1 :(得分：0)
你可以做到这一点的一种方法是使用CSS隐藏所有结果，然后逐个显示使用jQuery和CSS动画的值和动画。
下面的代码默认隐藏shuffle_results中的所有项目（在CSS中）。
然后jQuery遍历该类中的每个项目并显示该元素，然后设置其left和bottom属性的动画以使其具有正确的定位。持续时间设置为time。
旋转动画是使用CSS关键帧制作的。
<强> 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;
}
<强> HTML
<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);