创建一个在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);
}