using Timer Controls (i.e. setTimeout) in multiple loops
<p>I know how to display characters in news ticker type fashion (1 at a time on a delay), but I can seem to figure out how to display <strong><em>multiple</em> news items</strong>. For example:</p>

<ol>
<li>I have an array of strings.</li>
<li>I'd like to <strong>loop through <em>each item</em></strong> in the array, and...</li>
<li>and <strong>for each item</strong> (i.e. each string of text) in the array, I would <strong>then</strong> like to</li>
<li><strong>loop through <em>EACH CHARACTER</em></strong> in that string and...</li>
<li>display the character on screen <strong>in 70ms intervals</strong> (using setTimeout).</li>
<li>Once I've reached the last character in that string, I want to jump back to the previous loop (see #2) to continue <strong>at an interval of 1 sec.</strong> (again using setTimeout).</li>
</ol>

<p>Below is my feeble (i.e. greenhorn) attempt at solving this problem. I can get at each string and so far just do a console.log on it. Cant seem to figure out how to steps 4 through 6.</p>

<p>Somebody shed some light on this please.</p>

<p>Thanks In Advance! </p>

<pre><code>&lt;body&gt;

&lt;p class="theText"&gt;This is test 1 of the text.&lt;/p&gt;
&lt;p class="theText"&gt;This is test 2 of the text.&lt;/p&gt;
&lt;p class="theText"&gt;This is test 3 of the text.&lt;/p&gt;
&lt;div id="textScroller"&gt;&lt;/div&gt;

&lt;script type="text/javascript"&gt;

var textScroller = function(scrollContainer){
    var container = document.getElementById(scrollContainer);
    var nodeContainer = document.getElementsByClassName('theText');

    // this function gets only the nodeValues from the nodeContainer array
    // and puts them in an array called textArray
    var getTextArray = function makeTextArray(theNodeArray){
        var textArray = [];
        for(var i=0;i&lt;nodeContainer.length;i++){
            var container_text = nodeContainer[i].firstChild.nodeValue;
            textArray.push(container_text);
        }   
        return textArray;   
    };


    var textArray = getTextArray();

    /* 
        Right now the "showText" function just logs the string of text to the console.
        But the function SHOULD 
            [a] loop through each character in the CURRENT string and 
            [b] display the current character 
            [c] check if there are more characters and, if so...
            [d] display the next character in 70 milliseconds (i.e. setTimeout or setInterval)
            [e] if no more characters, go back to the function (loopArray) and get the next string
    */
    function showText(theString){
        console.log(theString);
    }

    // loop through and process each item in the array
    var l = 0;
    function loopArray(){
        var thisString = textArray[l];
        showText(thisString);
        if(l &lt; textArray.length -1){
            setTimeout(loopArray,1000);
        }
        l++;        
    }       

    setTimeout(loopArray,1000);
}

textScroller('textScroller');           
&lt;/script&gt;

&lt;/body&gt;
</code></pre>
