使用setTimeout（）使用动画键入文本不起作用

Question

我尝试制作一个用动画在字段中键入文本的程序。但它不起作用。 WHY ???

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));

这不起作用。它在超时时执行返回值，执行以下操作：

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)函数。这就是它超出堆栈内存的原因。 没有停止条件。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;