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>

Answer 1

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

Answer 2

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>

Answer 3

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>

Answer 4

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.

Answer 5

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>