javascript array timed

Question

I'm missing some little thing.. prints the array but doesn't wait in between lines.

<script type="text/javascript">

function showLines()
{
arr =
[
  "Hi!",
  "Welcome!",
  "Hello!"
]

var duration=2000;

document.getElementById("quotes").innerHTML=arr;
setTimeout('showLines()',duration);

}
</script>

Do you want to print each element of the array after 2 seconds? i.e. "Hi!" (2 seconds later) "Welcome!" (2 seconds later) "Hello!"? — Fred, Jul 20 '11 at 22:52

score 2 · Answer 1 · answered Jul 20 '11 at 22:53

2

That's because your just printing out the whole array, try this.

    function showLines(_index) {
       var arr =["Hi!", "Welcome!", "Hello!"], html = '', i, index = _index || 0,
       newIndex;

       for (i = 0; i < index && i < arr.length; ++i) {
          html += arr[i] + "<br />";
       }
       document.getElementById("quotes").innerHTML=html;

       newIndex = index + 1;
       if (newIndex < arr.length) {
          setTimeout(function() {showLines(newIndex);}, 2000);
       }
    }

That should do the trick.

If you only want one at a time then replace

           for (i = 0; i < index && i < arr.length; ++i) {
              html += arr[i] + "<br />";
           }

with

document.getElementById("quotes").innerHTML=arr[index];

answered Jul 20 '11 at 22:53

Zoidberg

10,137
2
31
53

`++i`? I've never seen that before. And I think he wants to print only one at a time. – Fred Jul 20 '11 at 22:56
Ahh, one at a time, okay, I will make an addition. – Zoidberg Jul 20 '11 at 22:57
it prints "welcome" and then "hello hello" so somewhere is not finding array[0] – hobbywebsite Jul 20 '11 at 23:04
Wait, I think you were right, I just wasn't reading your code properly XD – Fred Jul 20 '11 at 23:04
Sweet you guys are amazing!! XD – hobbywebsite Jul 20 '11 at 23:08

score 1 · Answer 2 · answered Jul 20 '11 at 23:02

The line

document.getElementById("quotes").innerHTML=arr;

will convert arr into a String by joining it with commas. Therefore, you will see

Hi!, Welcome!, Hello!

This function is idempotent, which is probably not what you are going for. I think what you're missing is an index that lets you know which element of the array you are on the next time the function is executed, and replaces the content of the quotes element with the next item in the array.

score 0 · Answer 3 · answered Jul 20 '11 at 22:54

0

You never asked him to wait. You're just calling the same function every 2 seconds. Try with showLines(i), innerHTML += arr[i], and setTimeout(showLines,duration,i++)

<script type="text/javascript">

function showLines(i)
{
arr =
[
  "Hi!",
  "Welcome!",
  "Hello!"
]

var duration=2000;

document.getElementById("quotes").innerHTML += arr[i];
i++;
setTimeout(showLines,duration,i);

}
</script>

answered Jul 20 '11 at 22:54

Cystack

3,301
5
35
33

no it doesnt... http://jsfiddle.net/9e5tX/1/ I bet you didnt start with showLines(0)... – Cystack Jul 20 '11 at 23:13

Paul · Accepted Answer · 2011-07-20T23:53:17.907

0

Most answers here are re initializing your array on each iteration.It makes no sense to do that. You should do it like this:

<script type="text/javascript">

function showLines(){

    var arr =
    [
      "Hi!",
      "Welcome!",
      "Hello!"
    ], i = 0;

    (function showLinesHelper(){
        document.getElementById("quotes").innerHTML += arr[i++]+'<br />';
        if(i < arr.length)
            setTimeout(showLinesHelper, 2000);
    })();

}

</script>

This way it works, and your array, and i are only initialized once.

EDIT In response to comment:

<script type="text/javascript">

function showLines(){

    var arr =
    [["Hi!", 3000],
     ["Welcome!", 500],
     ["Hello!", 1000]]
    , i = 0;

    function showLinesHelper(){
        document.getElementById("quotes").innerHTML += arr[i++][0]+'<br />';
        if(i < arr.length)
            setTimeout(showLinesHelper, arr[i][1]);
    }

    setTimeout(showLinesHelper, arr[0][1]);
}

</script>

edited Jul 20 '11 at 23:53

answered Jul 20 '11 at 23:14

Paul

139,544
27
275
264

This way is cool too because it keeps the words on the screen, so now I have to pick which way I want. THANKS ^^ – hobbywebsite Jul 20 '11 at 23:17
@hobbywebsite, the only difference between keeping the words on the screen or overwriting the, is the `+` in `+= arr[i++]`. I also added the `+'
'` to add a line break, but if you want it to only display one you should use this, but change the line to: `document.getElementById("quotes").innerHTML = arr[i++];` That way you can get my code to work like the others but you still don't recreate your entire array every two seconds. – Paul Jul 20 '11 at 23:25
I feel bad asking but what if I wanted to make the "duration" (2000) into another array.. so each line could have a different timeout. I tried copying your code function(showlineshlper) but there is a bit of a difference between printing out an array and storing it as a variable. – hobbywebsite Jul 20 '11 at 23:46
@hobbywebsite, I edited my post. I used a 2D array to make it simple, and more robust then two separate arrays. The number after the comma is how many milliseconds to wait before showing the string on that line. – Paul Jul 20 '11 at 23:56

score -1 · Answer 5 · answered Jul 20 '11 at 23:02

First of all, you should wrap your code in an onload or domready function. jQuery is good at this. You should use window.onload = myfunc; to do this.

Your code should look like this:

<script type="text/javascript">
  var init = function () {
    var myarray = ["Hi!","Welcome!","Hello!"], index = 0, printline = function () {
      document.getElementById("quotes").innerHTML += myarray[index];

      if (index + 1 < myarray.length) {
        setTimeout(printline, 2000);
      }  
      index++;
    };
    printline();
  }
  window.onload = init;

</script>

javascript array timed

5 Answers5

Linked