How to use Javascript to break up each word in a HTML string and then show each word back one by one in HTML?

Question

I want to take the innerHTML of a div and then split the string into words and change the same innerHTML to display each word one by one with a delay in between. My code below at the moment does not work:

document.addEventListener("click", function() {
    var text = document.getElementById("article-text");
    var textSplit = text.innerHTML.split(" ");
    function timeoutFunction()
    {
        for (var i = 0; i < textSplit.length; i++) setTimeout(function () {
            text.innerHTML = textSplit[i];

        }, 500);
    }
    timeoutFunction();
});

infamous for loop issue AND all the timeouts run at the same time — epascarello, Feb 20 '19 at 22:30
`for` loop does not await `setTimeout()`. You can multiply `i + 1 * 500`. — guest271314, Feb 20 '19 at 22:30
https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example — epascarello, Feb 20 '19 at 22:32

score 1 · Accepted Answer · answered Feb 20 '19 at 22:34

What about this, using recursion? call the same function and pass the index, when the index reaches the end of the loop, the recursion ends

document.addEventListener("click", function() {
    var text = document.getElementById("article-text");
    var textSplit = text.innerHTML.split(" ");

    function timeoutFunction(index){
        text.innerHTML = textSplit[index];
        // Recursion
        if(index < textSplit.length - 1){
            setTimeout(function(){
                timeoutFunction(index + 1);
            }, 500);
        }
    }


    timeoutFunction(0);
});

score 1 · Answer 2 · answered Feb 20 '19 at 22:34

At the first time, you think that calling multiple setTimeouts the effect will be as you expect, but actually that's not the case.

An alternative is to multiply the millis vs the index i to accomplish the effect. One more thing, you should use the statement let to keep the scope of the index i.

document.addEventListener("click", function() {
  var text = document.getElementById("article-text");
  var textSplit = text.innerHTML.split(" ");

  text.innerHTML = '';

  function timeoutFunction() {
    for (let i = 0; i < textSplit.length; i++) {
      setTimeout(function() {
        text.innerHTML += ' ' + textSplit[i];
      }, 500 * i + 1);
    }
  }
  
  timeoutFunction();
});

Click on this screen!
<div id='article-text'>Ele from Stack</div>

Tracker1 · Answer 3 · 2019-02-20T22:44:50.040

Just use the array as a queue and work it until it's done. .shift() pulls the next item from the array.

document.addEventListener("click", function() {
    var text = document.getElementById("article-text");
    var textSplit = text.innerHTML.split(" ");
    var runUp = text.innerHTML = '';
    function timeoutFunction()
    {
        runUp += ' ' + textSplit.shift();
        text.innerHTML = runUp;
        if (textSplit.length) setTimeout(timeoutFunction, 500);
    }
    timeoutFunction();
});

How to use Javascript to break up each word in a HTML string and then show each word back one by one in HTML?

3 Answers3