.innerHTML with setTimeout prints only the last part in loop

Question

I am new to JavaScript.

What I want to do is print the elements of an array one by one on the same location, but after a specific time interval.

Here it prints only the last element.

<!DOCTYPE html>
<html>
<head>
  <title>sample</title>
</head>

<body>
  <p id="test"></p>

  <script>
  const words = [ "Word1" , "word2" , "word3" , "word4" ];

  for (let i = 0; i < words.length; i++ ) { 
    console.log(words[i]);
    setTimeout(function(){  document.getElementById('test').innerHTML = words[i]; }, 2000);
  }
  </script>
</body>
</html>

(Please note that JavaScript is one word, not two. Sorry for being a pedant) — evolutionxbox, Oct 22 '20 at 18:30
@epa, oh, right, `let`.... There's a dupe of this out there though. — Heretic Monkey, Oct 22 '20 at 18:32
Here it is: [setTimeout inside for loop](https://stackoverflow.com/q/1776687/215552) — Heretic Monkey, Oct 22 '20 at 18:37
@HereticMonkey maybe this one? https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example — evolutionxbox, Oct 22 '20 at 18:37
@evolutionxbox That's the one I posted first. The problem is not the lack of closure, it's the setting of `innerHTML` to a different value at the same time; the last one wins. — Heretic Monkey, Oct 22 '20 at 18:39
@HereticMonkey sorry I pasted the wrong link. https://stackoverflow.com/questions/22154129/javascript-settimeout-loops — evolutionxbox, Oct 22 '20 at 18:44

score 1 · Accepted Answer · answered Oct 22 '20 at 18:31

You can try this,it prints all one after the other

const words = ["Word1", "word2", "word3", "word4"];
for (let i = 0; i < words.length; i++) {
  console.log(words[i]);
  setTimeout(function() {
    document.getElementById('test').innerHTML += words[i];
    document.getElementById('test2').innerHTML = words[i];
  }, 2000 * i);
}

<!DOCTYPE html>
<html>

<head>
  <title>sample</title>
</head>

<body>
  <p id="test"></p>
  <p id="test2"></p>

</body>

</html>

score 0 · Answer 2 · answered Oct 22 '20 at 18:41

You are using the wrong function.

A timeout just pauses the script for a period of time, what you are looking for is setInterval.

<!DOCTYPE html>
<html>
  <head>
    <title>sample</title>
  </head>
  <body>
    <p id="test"></p>
    <script>
      const words = ['Word1', 'word2', 'word3', 'word4'];

      i = 0;
      const counter = setInterval(foo, 1000);

      function foo() {
        document.getElementById('test').innerHTML = words[i];
        i++;
        if (i >= 4) clearInterval(counter);
      }
    </script>
  </body>
</html>

.innerHTML with setTimeout prints only the last part in loop

2 Answers2