繁体   English   中英

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

[英]Why is this printing one letter at a time?

为什么

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

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>
userRead.apply(this, quest);

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

所以userReadquest参数现在是你将单个字符发送到textIt的单个字符串

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

textIt(quest[ints]);

至:

textIt(quest);

并摆脱第一个:

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

(但一定要保持后面的大括号)

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

我评论了代码:

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM