Question

基本上我试图从头开始制作一个打字机脚本，为我的小终端网络应用程序junkie xD

好吧，我有这个JavaScript的东西：

var str = "dude";
var num = 1000;
for (var i = 0, len = str.length; i < len; i++) {
var num = num + 100;
var dude = str[i];
setTimeout('document.getElementById("guide").innerHTML +=dude;', num);
}

显然用div ID，“d”“u”“d”“e”以100毫秒的间隔写入guide，但猜猜是什么？

它没有那样做!!

现在它做什么打印“e”多次，因为它们是字符串中的字符，伙计!!

：|

谢谢，

我可能是超级傻瓜

但我喜欢修复！

提前致谢！

Answer 1

您可能希望在setTimeout中调用函数，如下所示：

var str = "dude";
var num = 1000;
for (var i = 0, len = str.length; i < len; i++) {
  var num = num + 100;
  var dude = str[i];
  setTimeout(function() {
    document.getElementById("guide").innerHTML +=dude;
  }, num);
}

或

var str = "dude";
var num = 1000;
for (var i = 0, len = str.length; i < len; i++) {
  var num = num + 100;
  var dude = str[i];
  setTimeout(changeHtml, num);
}

function changeHtml() {
  document.getElementById("guide").innerHTML +=dude;
}

如果您想要更精确的100毫秒间隔，您可能需要使用setInterval

var myInterval = setInterval(changeHtml, 100);
var len = str.length;
var current = 0;

function changeHtml() {
  if(current < len) {
    document.getElementById("guide").innerHTML +=str[current];
  }
  else {
    clearInterval(myInterval);
  }
  current++;
}

Answer 2

我写了一个接受2个参数的小函数：文本和时间：

function defiredWriteText(text,time, index){
    if(index === null || index === undefined) {
        index=0;
    }
    setTimeout(function (){
        var dude = text[index];
        document.getElementById("guide").innerHTML += dude;
        if(index < text.length-1)
            defiredWriteText(text, time, ++index);
    }, time)
}

示例：http://jsfiddle.net/3e3yx/

JavaScript打字机脚本无法正常工作

2 个答案: