How would I make setInterval pause the for loop it is in?
<p><a href="http://jsfiddle.net/xDWLQ/" rel="nofollow">http://jsfiddle.net/xDWLQ/</a></p>

<p>JavaScript:</p>

<pre><code>var quotes = new Array();
quotes[0] = "message 0";
quotes[1] = "message 1";

var qText = document.getElementById('qText');
for (i = 0; i &lt; quotes.length; i++) {
    setInterval(function() { qText.innerHTML = quotes[i]; }, 2000);
}​
</code></pre>

<p>HTML:</p>

<pre><code>&lt;p class="qText" id="qText"&gt;Predefined text&lt;/p&gt;​
</code></pre>

<p>The <code>innerHTML</code> of <code>qText</code> changes to undefined, instead of changing into <code>quotes[0]</code>, followed by <code>quotes1</code>. Now I tried debugging it by using <code>alert()</code> inside the setInterval function to give me the index of the for loop, and it said "2" both times. So, how would I have the for loop paused instead of setInterval creating new threads and incrementing the index?</p>
