在JavaScript中以一定的时间间隔一次打印一个字符串

时间:2013-06-04 13:57:33

标签: javascript string function for-loop timer

我想创建一个效果,你可以看到屏幕上写出的文字;我想通过一次打印一个字符来实现这一点。我已经成功地一次打印了一个角色,但由于以前没有定时器经验,因此添加定时器是一项艰巨的任务。并且结果是“未定义”一个接一个地打印出来所以我猜它不能拿起'句子[i]'由于某种原因我不知道..

以下是我正在使用的代码:

function printSentence(id, sentence){
    for(var i = 0; i < sentence.length; i++){
        (function(index) {
            setTimeout(function() {
                document.getElementById(id).innerHTML+=sentence[i]; 
            }, 100);
        })(i);
    }
}

4 个答案:

答案 0 :(得分:3)

您的代码存在两个问题:

  1. 您正在闭包中创建变量index,但您在回调中使用变量i,该变量将在执行回调之前更改。

  2. 你在100毫秒后开始所有的超时,所以它们几乎会在同一时间运行。

  3. 所以:

    function printSentence(id, sentence){
      for(var i = 0; i < sentence.length; i++){
        (function(index) {
          setTimeout(function() {
            document.getElementById(id).innerHTML+=sentence[index]; 
          }, 100 * i);
        })(i);
      }
    }
    

答案 1 :(得分:2)

变量i不在闭包中的函数范围内。由于您通过iindex传递给该功能,因此您可以使用index

function printSentence(id, sentence){
    for(var i = 0; i < sentence.length; i++){
        (function(index) {
            setTimeout(function() {
                document.getElementById(id).innerHTML+=sentence[index]; 
            }, 100);
        })(i);
    }
}

编辑:

这是因为对setTimeout的调用与以前的调用不同步,而是使用setInterval方法,或者将timeout增加一些因素。

使用setInterval:这很好用

<html>
<script>
function printSentence(id, sentence){

        var index=0;
        var intObject= setInterval(function() {
               document.getElementById(id).innerHTML+=sentence[index]; 
               index++;
               if(index==sentence.length){
                     clearInterval(intObject);
                }
            }, 100);
}
</script>
<body>
 <div id="diii"  onclick="printSentence('diii','helloworld');" style="height:500;width:500">

 </div>
</body>
</html>

答案 2 :(得分:1)

尝试以下(jsfiddle example)

function doWithInterval(id, sentence)
{
    var f;
    f= function(i){
        document.getElementById(id).innerHTML+=sentence[i];
        if(i+1==sentence.length)
           return;
        window.setTimeout(function(){f(i+1);},500);
    }
    f(0);
}

doWithInterval('input','lama ani');

答案 3 :(得分:0)

怎么样:

var message="Hello World!";

 function printMessage(message, seconds){
     var i=0, len=message.length, wait=seconds*1000;
     function print(){
         if (i<len){
            console.log(message[i]);
            setTimeout(print, wait);
            i+=1;
        }
    };
    print();
}

printMessage(message, 1);

而不是将其记录到控制台,您应该将其添加到目标的textContent。