使用 Jquery 一次显示一个数据答案

【问题标题】：Display Data one at a time using Jquery使用 Jquery 一次显示一个数据
【发布时间】：2017-05-31 11:35:18
【问题描述】：

我需要一次显示一个数据，但我的代码一次显示所有数据，我错过了什么？这是我的 HTML/PHP 代码

<div style="position: relative;">
    <?php for ($i=1; $i < 1000; $i++) { 
    ?>
    <p id="<?php echo $i; ?>" style="position: absolute; display:none; ">Name <?php echo $i; ?></p>
    <?php   
    }
    ?>
</div>

这是我的 Javascript 代码

<script>
$(document).ready(function(){
    var count;
    $(".btn2").click(function(){
        for(count = 0; count < 1000; count++){
            $("#"+count).show();
            setTimeout(function() { $("#"+count).hide(); }, 500);
        }

    });
});
</script>

我使用的是 jquery 3.2.1 版

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

【问题讨论】：

好吧，setTimeout 不会暂停 javascript

标签： javascript jquery

【解决方案1】：

您必须这样做才能一次显示一个数据。

<script>
$(document).ready(function(){
    var count = 0;
    $(".btn2").click(function(){
        $("#"+(count++)).show();
        setTimeout(function() { $("#"+(count-1)).hide(); }, 500);
    });
});
</script>

一键显示所有数据，延迟 500 毫秒：

<script>
$(document).ready(function(){
    var count = 0;
    $(".btn2").click(function(){
        var iterator = function() {
            $("#"+(count++)).show();
            setTimeout(function() { $("#"+(count-1)).hide(); if (count<1000) iterator(); }, 500);
        }
        iterator();
    });

});
</script>

【讨论】：

很确定 OP 希望单击一下以显示所有数据，一个接一个地显示每个项目之间的延迟。
这可行，但我需要的是当我点击它时它会自动显示，而不是通过再次点击按钮触发
@nnnnnn 是的，我需要的是一键，它会一一显示数据
@Martney Acha 我添加了第二部分来做你需要的，再试一次。
@Val 这行得通！！！感谢您因此节省了很多时间！干杯！！！！

【解决方案2】：

我使用 jquery 在包装器中附加 1000 个 div，而不是使用 PHP。

如果有用，请参考我的代码。

$(document).ready(function() {
  for (var i = 0; i <= 1000; i++) {
    $(".wrapper").append("<div class='item' id='" + i + "'>" + i + "</div>");
  };
});
var step = 0;

function hideItemFunc() {
  var interval = setInterval(function() {
    $("#" + step).animate({
      opacity: 1
    }, 500);
    step += 1;
  }, 500);
}

.item {
  width: 20px;
  height: 20px;
  display: inline-block;
  margin: 3px;
  font-size: 9px;
  background: #aaa;
  text-align: center;
  line-height: 20px;
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<button class="btn2" onclick="hideItemFunc()">Run</button>
<div class="wrapper">
</div>

【讨论】：

嘿伙计，你知道我是否想设置 2 间隔速度吗？ stackoverflow.com/questions/44276591/…@Minh
@MartneyAcha 我可以知道你的情况和 02 间隔速度的值吗？

【解决方案3】：

您可以使用 setInterval 代替 setTimeout。这将重复调用该函数。 SetTimeout 只执行一次，而 setInterval 是重复的。

另外，你需要重复的执行顺序应该在 setInterval 的函数体内。

var count = 1;
var delayMillis = 5000; //5 second

$(document).ready(function(){
    $("#btn2").click(function(){
            setInterval(function() {
                //your code to be executed after 5 second
                $("#" + count).show();
                count++;
            }, delayMillis);

        });
    });

当前代码在 5 秒后依次显示每条 p 条记录。您需要做的任何其他事情都将在 setInterval 块内

【讨论】：