Code runs simultaneously (typewriter effect)

Question

I'm running into an issue with my code. I'm executing this function below multiple times in a row. I want the code to execute the second time I call the 'defiredWriteText'-function, after the first call is finished writing its string. This is the code:

function defiredWriteText(text,time, index, p_id){
        const newP = document.createElement("p");
        newP.id = p_id;
        document.getElementById("container").appendChild(newP);
        
        if(index === null || index === undefined) {
                index=0;
        }
            setTimeout(function (){
                    var txt = text[index];
                    document.getElementById(p_id).innerHTML += txt;
                    if(index < text.length-1)
                        defiredWriteText(text, time, ++index,p_id);
        }, time)
    }



//This first
var str = "Hello stranger! What's your name?"
var num = 100;
var p_id = "p_1";
defiredWriteText(str,num,0,p_id);

//Then this                             
var str = "Oooooh! It's you..."
var num = 100;
var p_id = "p_2";
defiredWriteText(str,num,0,p_id);

//This at last
var str = "..."
var num = 175;
var p_id = "p_2";
defiredWriteText(str,num,0,p_id);

<div id="container"></div>

I do not fully understand, why this all runs at once. Any help is appreciated

This runs at once because nothing tells it to wait for eachother to complete. Take a look at the following link: https://stackoverflow.com/questions/21518381/proper-way-to-wait-for-one-function-to-finish-before-continuing — tijn167, Aug 10 '21 at 09:50

score 1 · Accepted Answer · answered Aug 10 '21 at 09:54

Have it return a Promise which you can then await (or use then if you so prefer)

function defiredWriteText(text,time, index, p_id){
        const newP = document.createElement("p");
        newP.id = p_id;
        document.getElementById("container").appendChild(newP);
        
        return new Promise(resolve => {
          const appendText = (index) => {
            if(index === null || index === undefined) {
                  index=0;
            }
            setTimeout(function (){
                      var txt = text[index];
                      document.getElementById(p_id).innerHTML += txt;
                      if(index < text.length-1)
                          appendText(++index);
                      else
                        resolve();
            }, time)
          }
          appendText();
        })
    }

(async function() {
  //This first
  var str = "Hello stranger! What's your name?"
  var num = 100;
  var p_id = "p_1";
  await defiredWriteText(str,num,0,p_id);

  //Then this                             
  var str = "Oooooh! It's you..."
  var num = 100;
  var p_id = "p_2";
  await defiredWriteText(str,num,0,p_id);

  //This at last
  var str = "..."
  var num = 175;
  var p_id = "p_2";
  await defiredWriteText(str,num,0,p_id);
})()

<div id="container"></div>

Thank you for your reply. I must admit, I'm quite confused about the syntax. I'm used to basic C++ with one main function and several callable functions. As far as I see, this is one big function. Is there a way for me to call 'desiredWriteText' later in my program? How would I do so? — SAFD, Aug 10 '21 at 18:09
@SAFD `defiredWriteText` _is_ just a standalone function, you can call it from anywhere you like. — Jamiec, Aug 11 '21 at 07:46

Code runs simultaneously (typewriter effect)

1 Answers1