setTimeout within for loop not working

Question

Using Javascript I am trying to take a string of text and have it broken down into individual words and then have them displayed consecutively separated by a set delay. I have looked at other 'set timeout in for loop' stack overflow answers but can't figure it out. The code below properly separates the string into an array of words but then loops to displaying the last word without delay.

var string = "Display this line of text as individual words in two second intervals!";
var delay = 2000;

function myFunction() {
  var array = string.split(' ');

  for (var i = 0; i < array.length; i++) {
    setTimeout(function() {
      document.getElementById("textbox").innerHTML = array[i];
    }, delay);
  }
}

<button onclick="myFunction()">Run</button>
<div id="textbox"></div>

Please combine your 2 snippets into one that we can actually execute and see the result you described. — takendarkk, Jul 11 '17 at 19:46
The reason is `i` is a var. Make it `let` to create a scoped variable. Because now before first timeout expires i = final value. — Egor Stambakio, Jul 11 '17 at 19:47
loop has completed by the time `setTimeout` runs and i is not what you think it is — charlietfl, Jul 11 '17 at 19:47
@PraveenKumar well, then closures like a functions generator. :) Now I see your answer. — Egor Stambakio, Jul 11 '17 at 19:52

score 4 · Accepted Answer · answered Jul 11 '17 at 19:48

You should use closures for this. Also, look at how the data is passed to the innerHTML.

var string = "Display this line of text as individual words in two second intervals!";
var delay = 2000;

function myFunction() {
  var array = string.split(' ');
  for (var i = 0; i < array.length; i++) {
    (function (str) {
      setTimeout(function () {
        document.getElementById("textbox").innerHTML = str;
      }, delay * i);
    })(array[i]);
  }
}

<button onclick="myFunction()">Run</button>
<div id="textbox"></div>

Rick · Answer 2 · 2017-07-11T21:42:39.217

You could use Symbol.iterator

let str = "Display this line of text as individual words in two second intervals";
str = str.split(' ');
let count = str.length;
let string = str[Symbol.iterator]();

let interval = setInterval(function() {
  count--;
  let div = document.createElement('div');
  div.innerText = string.next().value;
  document.body.appendChild(div);
  if (count === 0) {
    clearInterval(interval)
  }
}, 500);

setTimeout within for loop not working

2 Answers2