typewriter（javascript）のようなユーザー入力からアニメーション配列

Question

私の質問はthis oneと少し似ていると思いますが、私の具体的なニーズをどのように行うかは実際には分かりません。私は非常に基本的なテキスト・アドベンチャーを構築しています。ユーザーがコマンドを入力した後に戻されたテキストをタイプライター・スタイルで戻すことを希望します。ここでは、これまで私の命令のスニペットは、（多くのがあるだろう、私はこれが退屈な方法のビットで構築されることを気にしない）です

<script> 

textIn = document.getElementById("input-textbox"); 
textOut = document.getElementById("output-textbox"); 

function process(input) { 
    if (input == "hi") { textOut.innerHTML += "Hello to you too!<br><br>"; } 
    else if (input == "exit") { textOut.innerHTML += "No."; } 
} 

function go() { 
    var input = textIn.value; 
    textIn.value = ""; 
    var output = process(input); 
    textOut.value += output + "\n"; 
} 

</script> 

とHTML

<div id="output-textbox"> 
    Returned text goes here. 
</div> 
<form onSubmit="go();return false;"> 
<input id="input-textbox" name="command" value="" autofocus="autofocus"/> 
</form> 

あらかじめご協力いただきありがとうございます！このソリューションは、美しく、コードを賢明にする必要はなく、非常に気の利いたものでもありません。それだけで働かなければならない、私はこれで全く基準がない！

Answer 1

ループ内の各文字のタイムアウトを作成します。各タイムアウトは最後のタイムアウトより少し遅れています。参照：https://jsfiddle.net/fswam77j/1/

var outputEl = document.querySelector('#output-textbox'); 
var charInterval = 50; // ms between characters appearing 

function showOutput(text) { 
    outputEl.innerHTML = ''; 
    for(var i = 0; i < text.length; i++) { 
    showChar(text, i); 
    } 
} 

function showChar(text, i) { 
    setTimeout(function() { 
     outputEl.innerHTML += text[i]; 
    }, i * charInterval); 
} 

showOutput('this is an example'); 

プロセス入力：ウィリアムBの答えに基づいて

function process(input) { 
    if (input == "hi") { 
     showOutput("Hello to you too!"); 
    } 
    else if (input == "exit") { 
     showOutput("No."); 
    } 
} 

Answer 2

が、ここではより多くの凝縮版です：

https://jsfiddle.net/sators/4wra3y1p/1/

HTML

<div id="output-typewriter"></div> 

Javascript

function typewriterText(text) { 
    var outEl = document.querySelector('#output-typewriter'); 
    var interval = 50; // ms between characters appearing 
    outEl.innerHTML = ''; 
    text.split('').forEach(function(char, i){ 
     setTimeout(function() { 
     outEl.innerHTML += char; 
     }, i * interval); 
    }); 
} 

typewriterText('this is an example');