setTimeout（）を使用したアニメーションのテキスト入力が機能しません

Question

アニメーションを使用してフィールドにテキストを入力するプログラムを作成しようとしました。しかし、それは動作しません。なぜ？？？

var str = "SuperUser"; 
var i = 0; 
var inp = document.getElementsByTagName("input")[0]; 

function enter(str, elem, i){ 
    elem.value += str[i]; 
    i++; 
    setTimeout(enter(str, inp, i), getRandomInt(500, 2000)) 
} 
setTimeout(enter(str, inp, i), getRandomInt(500, 2000)) 

function getRandomInt(min, max) { 
    return Math.floor(Math.random() * (max - min)) + min; 
} 

エラーのスクリーンショット：

Answer 1

setTimeout(enter(str, inp, i), getRandomInt(500, 2000)); 

このdoesntの仕事。あなたは、あなたがどこかに停止する必要が入力で、また

setTimeout(function(){ 
enter(str,inp,i); 
},1000); 

：それはタイムアウトで戻り値を実行し、これを行います。最初の行に追加します。

if(i>=str.length){return;} 

ところで、あなたはいけないグローバルスコープで聞きしたいなどの変数を渡す必要があります：

enter(); 

をすべて一緒：

window.onload=function(){ 
var str = "SuperUser"; 
var i = 0; 
var inp = document.getElementsByTagName("input")[0]; 
    function enter(){ 
    if(i>=str.length){return;} 
    inp.value += str[i]; 
    i++; 
    setTimeout(enter, getRandomInt(500, 2000)); 
} 
enter(); 
function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min)) + min; } 
}; 

Answer 2

あなたは再帰的enter(str, inp, i)関数を呼び出しています。それがスタックメモリを超えている理由です。 停止条件はありません。

var str = "SuperUser"; 
 
var i = 0; 
 
var inp = document.getElementsByTagName("input")[0]; 
 

 
function enter(str, elem, i){ 
 
    elem.value += str[i]; 
 
    i++; 
 
    setTimeout(enter(str, inp, i), getRandomInt(500, 2000)); 
 
} 
 
enter(str, inp, i); 
 

 
function getRandomInt(min, max) { 
 
    return Math.floor(Math.random() * (max - min)) + min; 
 
}

<input type="text"> 
 
<input type="text"> 
 
<input type="text">