Creating a function that shows the output step by step in JavaScript

Question

Im trying this and the code works fine. The page process the code and then shows me the result, but I dont want this. I want the page show step by step the for process, first print A, wait some time and then show AB, wait again and show ABC, etc...

window.onload = function() {
  var parrafo = document.createElement("p");
  var frase = "ABCDEFGHIJ";
  var spl = frase.split("");
  document.body.appendChild(parrafo);
  for(i in spl){
    var contenido = document.createTextNode(spl[i]);
      parrafo.appendChild(contenido);
      sleep(100);
    }
  }

function sleep(ms) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > ms){
      break;
    }
  }
}

Answer 1

You can use the setTimeout() function and wrap the for loop in that. For example,

printStuff(spl, i) {
    var contenido = document.createTextNode(spl[i]);
      parrafo.appendChild(contenido);
      setTimeout(printStuff(spl, i++), 1000);
}