CODEWITHSUNDEEP
javascript
programforjoy
programforjoy

Reputation: 499

javascript: using settimeout in a for loop to show text at regular intervals

I want to show 3 lines at regular intervals(one second),here's the code:

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    function showText()
    {
        var itemlist = document.getElementsByClassName("test");
        function additem(index) {
            setTimeout(function(){itemlist[index].setAttribute("style", "display:block;");}, 1000);
        }
        for(var i=0;i<itemlist.length;++i) {
            additem(i);
        } 
    }
    </script>
    </head>

    <body>
        <input type="button" value="show" onClick="showText()">
        <div class="test" style="display:none">first</div>
        <div class="test" style="display:none">second</div>
        <div class="test" style="display:none">third</div>
    </body>
    </html>

But the result is: when I click the show button,a second later, all three div block appear together.I was expecting they will be displayed one by one with an interval of one second.

How can I fix this? Hope for your help.

Upvotes: 1

Views: 1751

Answers (2)

Kalpesh Singh
Kalpesh Singh

Reputation: 1717

  • Create a global variable
  • Use setInterval function
  • increment count every time when setInterval executes
  • start again from the start if it reaches last (if diff. b/w no. divs and count is less than 1)
  • fade out all divs except the current one

$(document).ready(function() {
  var count = 0;
  setInterval(function() {
    showIframe(count);
     count++;
    if (($('.wall-display').length - count) < 1) {
                    count = 0;
                }
  }, 1000);
  function showIframe(count) {
    $('.wall-display').fadeOut('fast');
    $('#frame' + count).fadeIn('fast');
  }
  
  
});
.wall-display:not(:first-child) {
  display: none;
  position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wall-display" id='frame0'>I'm first text</div>
<div class="wall-display" id='frame1'>I'm second text</div>
<div class="wall-display" id='frame2'>I'm third text</div>

Upvotes: 0

Todd Christensen
Todd Christensen

Reputation: 1327

You're calling all of them at the same time. Using just line1 for clarity.

setTimeout(line1, 1000);
setTimeout(line2, 1000);
setTimeout(line3, 1000);

They don't "stack". All three functions will run in 1 second.

You have two options. Option 1:

setTimeout(line1, (1 + index) * 1000);
setTimeout(line2, (1 + index) * 1000);
setTimeout(line3, (1 + index) * 1000);

This will cause them to timeout one after another.

The other option is making the timeout call the next one:

var index = 0;
function showNextLine() {
    // show line index
    index++;
    if (index < 3) {
       setTimeout(showNextLine, 1000);
    }
}
setTimeout(showNextLine, 1000);

This way they "chain" like you might be expecting.

There are other variations, and you could even use setInterval() and clearInterval().

Upvotes: 2

Related Questions