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

Question

WHY

Lets just forget about what I was trying to do! This is what ended up happening. Why is it printing a single letter as a time?

http://jsfiddle.net/m9ZAc/

Check it ^^^

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

Answer 1

userRead.apply(this, quest);

The second argument for apply is an array, and the elements of that array become single parameters to the function being called

So userRead 's quest parameter is now the single string of which you're sending single characters to textIt

Answer 2

If you want it to print the whole thing at once, a quick way to change it is just to change:

textIt(quest[ints]);

to:

textIt(quest);

And get rid of the first:

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

(but be sure to keep the closing curly bracket after it)

Answer 3

I suppose you asking for an explanation for the code because you don't understand what it does or how it works.

I've commented the code:

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

However, this code is pretty badly written and very redundant. An easier and more efficient way is the following:

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

Fiddle: http://jsfiddle.net/m9ZAc/1/