Question

我想要做的是一个文本，它可以产生自己编写的效果：

一个简单的<body>，有两个元素可以看到示例：

HTML：

<body>
   <button id="write" type="button">Write!</button>
   <h1 id="text"></h1>
</body>

JS：

 $("#write").click(function() {

        //Here is an example text to write it is a fragment from the newspaper El país on Spanish
        var text = "Llamada oculta. Al otro lado del teléfono suena una voz muy grave, fuerte, de un hombre con un inglés de ligero acento escandinavo. Soy Lars Hedegaard, creo que querías hablar conmigo. Verse no es posible. Ni se encuentra en Copenhague ni puede dar su paradero al estar bajo protección policial. Hedegaard, historiador y periodista danés de 74 años, es un reconocido y duro crítico del islam. Le grabaron en su casa, sin previo aviso según defiende, diciendo cosas como que en las familias musulmanas, las niñas eran violadas por padres, tíos y sobrinos. Por esto fue multado en 2011 con unos 700 euros.";

        var writer = ""; writer.length = 0; //Clean the string
        var maxLength = text.length;
        var count = 0;
        var speed = 5000 / maxLength; //The speed of the writing depends of the quantity of text

            var write = setInterval(function() {

                if (count > text.length) { clearInterval(write); }

                writer += text.charAt(count);
                document.getElementById("text").innerHTML = "" + writer + "";
                count++;

            }, speed);

        $("#write").click(function() { clearInterval(write); }); //Clean the interval to avoid the execution of various intervals at the same time

    });

我怀疑的是，如果我使用正确的方法来做，也就是说，我不知道使用循环for是否更好，或使用setInterval （如示例中所示），如果代码可以更简化，也是如此。

但是，当然，如果我使用for，我必须在其中添加setTimeout，这就是我遇到麻烦的地方。

所以，如果有任何身体有其他方法，请告诉我！谢谢！

示例：jsfiddle

Answer 1

修改

正如评论中指出的那样，您可以像访问数组一样访问字符串，因此我的原始答案中不需要text.split()。差异归结为此，然后：我将从代码中消除冗余的writer var并将字符直接附加到元素。基本上取代

writer += text.charAt(count);
document.getElementById("text").innerHTML = "" + writer + "";
count++;

与

document.getElementById("text").innerHTML += text[count++];

但最终归结为我认为的编码风格。 Updated fiddle

原始

另一个明确的方法是将字符串拆分为一个字符数组。然后你可以保持一个全局计数器（或者只是在作用域链中的一个级别），并在setInterval内使用你的函数在每次迭代时递增这个计数器，并将该索引处的任何字符追加到你的元素 - 基本上是什么你做了，除了数组，使增量部分更简单。

Here's a working fiddle建议的解决方案。这没有jQuery，但你明白了。

如何使自己编写的文本的效果

1 个答案:

修改

原始