CODEWITHSUNDEEP
javascriptjquery
Martney Acha
Martney Acha

Reputation: 3002

Display Data one at a time using Jquery

I need to display data one at a time but my code is displaying the data all at once, what am I missing ? Here is my HTML/PHP CODE

<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>

And here is my Javascript Code

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

    });
});
</script>

I'm using jquery version 3.2.1

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

Upvotes: 0

Views: 611

Answers (3)

Minh Triết B&#249;i
Minh Triết B&#249;i

Reputation: 31

I'm using jquery to append 1000 div inside a wrapper instead using PHP.

Ref my code if it's useful.

$(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>

Upvotes: 1

Umashankar Das
Umashankar Das

Reputation: 601

You can use setInterval instead of setTimeout. That will call the function repeatedly. SetTimeout executes only once while setInterval is repetitive.

Also, the execution sequence you need repeated should inside the function body of 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);

        });
    });

The current code displays each of the p records after a 5 seconds one after another. anything else you need to do will be inside the setInterval Block

Upvotes: 0

Val
Val

Reputation: 22797

You have to do this to show data one at a time.

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

One click to show all data one at a time with 500 ms delay:

<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>

Upvotes: 2

Related Questions