0

我正在尝试想出一些东西来模拟老式的调制解调器连接。以可变速度绘制自身而不是立即渲染的 IE 文本。

这是我想出的可行的方法：

http://jsfiddle.net/vUPK2/

我的问题是我不能让它更快。我已将 setInterval 设置为 1ms，这似乎是我能得到的最快速度。

有谁知道如何重新考虑这个以消除我遇到的速度上限？

4

5 回答 5

3

这似乎有点快，至少在 FireFox 中是这样。尽管完全重写，唯一真正的区别是没有使用 jQuery 或“循环”内的字符串长度属性。我还增加了一次做多个角色的能力。5-10 个字符似乎是一个不错的范围。

function TextTyper(targetElement, charsAtATime, textToType) {
    var i,
        l = textToType.length,
        timeout,
        el = $(targetElement)[0],
        textNode = el.childNodes[0];
    if (!textNode) {
        textNode = document.createTextNode('');
        el.appendChild(textNode);
    }
    this.begin = function() {
        i = 0;
        if (timeout) { clearTimeout(timeout); }
        textNode.nodeValue = '';
        typeChar();
    };
    console.log(textNode);
    function typeChar() {
        if (i < l) {
            textNode.nodeValue += textToType.substr(i, charsAtATime);
            i += charsAtATime;
            timeout = setTimeout(typeChar, 1);
        } else {
            timeout = 0;
        }
    }
}

(new TextTyper('#test', 8, 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam rhoncus urna vitae mi aliquet suscipit. Nullam vulputate ultrices tortor vel luctus. Duis sodales lacinia consequat. Vestibulum vehicula, ligula sit amet tincidunt scelerisque, orci arcu malesuada odio, eu ornare ipsum risus at metus. Nullam porttitor condimentum nunc, nec euismod massa consectetur id. Mauris ut nisl nulla, et tristique sem. In non ante vel libero lacinia vehicula in quis urna. Suspendisse urna erat, ornare sit amet rhoncus eget, bibendum at ipsum.'))
   .begin();

我在这里观察了一些关于闭包和范围的最佳实践。但是你应该在页面卸载时摆脱你的 TextTyper 对象，并且应该正确地处理它们而不在紧密循环中创建新对象（或者你可以使用 targetElement 上的闭包泄漏内存）。

在 jsfiddle 看到这个。

注意：我选择setTimeout而不是setInterval因为我不希望同一个脚本的多次调用相互踩踏。鉴于代码运行的速度，我怀疑它是否可以，但这是一种很好的设计实践。如果这是一个 Ajax 调用，您不希望在第一个请求的应答到来之前使服务器充满请求。

于 2012-07-25T19:37:33.540 回答
1

您可以尝试一次附加多个字符。尝试附加 2 或 3 个字符，或更多。

动画速度取决于帧速率和帧之间的变化量。

于 2012-07-25T19:20:58.533 回答
1

是的，只需在 displayText 函数中添加两个字母（或更多）。在 for 循环中执行此操作，您可以轻松调整变量。

于 2012-07-25T19:21:10.717 回答
1

在毫秒级速度方面不要使用 jQuery，至少要缓存引用。为了使动画比最小超时时间更快，您一次只能附加多个字符。特别是如果你想要一个类似的跨设备速度，你应该使用更长的超时时间，因为最小值可以变化- 标准动画速度是每秒 60 帧。

function displayText(id, text) {
    var node = document.createTextNode(""),
        i = 0,
        chars = 5;
    document.getElementById(id).appendChild(node);

    (function add(){
        node.data += text.substr(i, chars);
        i += chars;
        if (i < text.length)
            setTimeout(add, 1000/60);
    })();
}

jsfiddle.net 上的演示

于 2012-07-25T20:08:24.717 回答
0

替代方式

var txt="Lorem ipsum dolor sit amet";
index=0;
function displayText(text) {
    $('#test').append(text[index]); index ++;
    $('#test').append(text[index]); index ++;
    if (index  < text.length) {
        setTimeout(function(){ displayText(txt) }, 1);
    }
}

displayText(txt);

演示。

或者使用更近的

function txt_show(text)
{
    var index=0;
    var txt=text;
    displayText();
    function displayText() {
        $('#test').append(txt[index]); index ++;
        $('#test').append(txt[index]); index ++;
        if (index  < txt.length) setTimeout(displayText, 1);
    }
}
var txt="Lorem ipsum dolor sit amet";
txt_show(txt);

演示。

但IE它会更慢（仅在 IE8、FF 和 Chrome 中测试）。

于 2012-07-25T19:48:19.723 回答