Simulare l'aspetto di battitura a macchina, non i tasti premuti effettivi, in javascript

Question

Sto cercando di scrivere una semplice funzione che far sembrare come se qualcuno sta scrivendo in un textarea

- Questa è la mia funzione (perdonate me se la sua atroce, ma che normalmente non usiamo javascript) --- la parte console.log() funziona bene, ma per qualche motivo non può ottenere questo script per aggiornare il DOM il modo in cui mi aspetterei ...

 function type(string) { 
      value = ""; 

      el = document.getElementById("typeArea"); 
      for (var i = 0; i < string.length; i++) { 
       value += string[i]; 
       //$("#fbw > textarea").val(value); 
       el.textContent = value; 
       console.log(value); 
       sleep(160); 
      } 
      sleep(2000); 
     } 

Apprezzo ogni idea che mi puoi dare.

Answer 1

jsFiddle Demo

Tutto ti mancava era un costrutto invece di Sleep. L'approccio js per la realizzazione di questo è quello di utilizzare un timeout e una chiamata ricorsiva per scorrere la stringa

function type(string,element){ 
(function writer(i){ 
    if(string.length <= i++){ 
    element.value = string; 
    return; 
    } 
    element.value = string.substring(0,i); 
    if(element.value[element.value.length-1] != " ")element.focus(); 
    var rand = Math.floor(Math.random() * (100)) + 140; 
    setTimeout(function(){writer(i);},rand); 
})(0) 
} 

Answer 2

Si può fare qualcosa di simile usando la funzione setTimeout. Codepen

$(function(){ 
    simulateTyping('looks like someone is typing...', '#txt') 

    function simulateTyping(str, textAreaId) { 
    var textArea = $(textAreaId); 

    var currentCharIndex = 0; 
    function typeChar(){ 
     if (currentCharIndex >= str.length) 
     return; 
     var char = str[currentCharIndex]; 
     textArea.val(textArea.val() + char); 
     currentCharIndex ++; 
     setTimeout(typeChar, 500); 
    } 

    typeChar(); 

    } 
})