Executing setTimeout() in loop takes effect only in the first iteration

Question

This is my HTML file:-

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
  <script type="text/javascript">
    var stringArray = new Array();
    stringArray[0] = "Hi";
    stringArray[1] = "how";
    stringArray[2] = "are";
    stringArray[3] = "you?";
    var i = 0;
    while(i<stringArray.length)
    {
        setTimeout(print,3000,i);
        i++;
    }

    function print(k)
    {
        console.log(stringArray[k]);
    }

   </script>
</head>
</html>

Here I am trying to display each of the string in array stringArray at an interval of 3 sec. But when the page loads there is a pause of 3 sec only at the beginning and then all of the 4 string in my array are displayed together. It seems that setTimeout() takes effect only for the first time. Can anyone suggest what is happening here and also what changes do I need to make to display each of the individual strings at 3 sec interval.

You could also do it with `setInterval` like in this [JSFiddle](https://jsfiddle.net/4avf4jmz/2/) — KRONWALLED, Jul 08 '16 at 10:21
@Rayon : Thanks a lot it worked. If you can answer it I can mark it as the selected answer which would help others seeking the same question. — Parag Kadam, Jul 08 '16 at 10:23
it's not dupe of `http://stackoverflow.com/questions/5226285/settimeout-in-for-loop-does-not-print-consecutive-values` — Arnial, Jul 08 '16 at 10:27
@squint, I did not notice that... Deleted the earlier comment ... ;) — Rayon, Jul 08 '16 at 10:31

Executing setTimeout() in loop takes effect only in the first iteration

0 Answers0