为什么一次打印一个字母?

时间:2013-11-15 14:03:02

标签: javascript loops

WHY

让我们忘记我想要做的事情!这就是最终发生的事情。为什么一次打印一个字母?

http://jsfiddle.net/m9ZAc/

检查^^^

<div id="container">
</div>

<script>
    var ints = 0;
    var quest = ["Stack Overflow is for professional and enthusiast programmers, people who write code because they love it. We feel the best Stack Overflow questions have a bit of source code in them, but if your question generally covers…Stack Overflow is for professional and enthusiast programmers, people who write code because they love it. We feel the best Stack Overflow questions have a bit of source code in them, but if your question generally covers…Stack Overflow is for professional and enthusiast programmers, people who write code because they love it. We feel the best Stack Overflow questions have a bit of source code in them, but if your question generally covers…Stack Overflow is for professional and enthusiast programmers, people who write code because they love it. We feel the best Stack Overflow questions have a bit of source code in them, but if your question generally covers…Stack Overflow is for professional and enthusiast programmers, people who write code because they love it. We feel the best Stack Overflow questions have a bit of source code in them, but if your question generally covers…Stack Overflow is for professional and enthusiast programmers, people who write code because they love it. We feel the best Stack Overflow questions have a bit of source code in them, but if your question generally covers…Stack Overflow is for professional and enthusiast programmers, people who write code because they love it. We feel the best Stack Overflow questions have a bit of source code in them, but if your question generally covers…Stack Overflow is for professional and enthusiast programmers, people who write code because they love it. We feel the best Stack Overflow questions have a bit of source code in them, but if your question generally covers…"];
    setTimeout(function(){userRead.apply(this, quest)},50);
    function userRead(quest) {
        quest = quest;
        //var num = Math.floor(Math.random() * (1000 - 100 + 1) + 600);
        if(ints <= quest.length-1) {
            console.log(ints);
            textIt(quest[ints]);
            ints++;
            setTimeout(function(){userRead(quest)},50);}
        else {
            ints = 0;
            setTimeout(function(){userRead(quest)},50);}
    }
    function textIt(texting) {
        var app = document.getElementById('container');
        var box = document.createElement('span'); 
        box.innerHTML = texting;
        app.appendChild(box);
    }
</script>

3 个答案:

答案 0 :(得分:2)

userRead.apply(this, quest);

apply的第二个参数是一个数组,该数组的元素成为被调用函数的单个参数

因此,userRead的{​​{1}}参数现在是您将单个字符发送到quest

的单个字符串

答案 1 :(得分:0)

如果你想让它一次打印整个东西,一个快速的方法来改变它只是改变:

textIt(quest[ints]);

为:

textIt(quest);

摆脱第一个:

setTimeout(function(){userRead(quest)},50);

(但请务必保留后面的右括号)

答案 2 :(得分:0)

我想你要求对代码进行解释,因为你不明白它的作用或工作原理。

我评论了代码:

//Every 50 milliseconds, execute the userRead function
setTimeout(function(){userRead.apply(this, quest)},50);
function userRead(quest) {
    //ints is our current index where we save what letter we are at
    //Here we check if ints is still within the bounds of the lenght of your text, so we don't get an invalid index error
    if(ints <= quest.length-1) {
        //print the nth letter of your text, by accessing it like an array
        textIt(quest[ints]);
        //increase your index
        ints++;
        //repeat function
        setTimeout(function(){userRead(quest)},50);}
    else {
        //reset the index incase you reached the end of your text
        ints = 0;
        //and repeat function
        setTimeout(function(){userRead(quest)},50);}
}
function textIt(texting) {
    //select the element where we want to put the text, and add the current piece of text to it
    var app = document.getElementById('container');
    var box = document.createElement('span'); 
    box.innerHTML = texting;
    app.appendChild(box);
}

但是,这段代码编写得非常糟糕且非常冗余。以下是一种更简单,更有效的方法:

var index = 0;
var quest = "Your text";
setInterval(function(){
    if(index < quest.length){
        document.getElementById('container').innerHTML+= quest[index];
        index++;
    }else{
        index = 0;
    }
},50);

小提琴:http://jsfiddle.net/m9ZAc/1/