在javascript中模拟滚动文本
我正试图想出一些东西来模拟一个旧的学校调制解调器连接。 IE文本以可变速度绘制自己而不是立即渲染。
这是我提出的有用的东西：
http://jsfiddle.net/vUPK2/
我遇到的问题是我不能让它更快。 我的setInterval设置为1ms，这似乎和我一样快。
有没有人知道如何重新考虑这个因素来消除我遇到的速度上限？
当涉及到毫秒速度时，不要使用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上演示
这似乎有点快，至少在FireFox中。 尽管完全重写，唯一真正的区别是没有在“循环”中使用jQuery或字符串长度属性。 我还添加了一次执行多个角色的function。 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调用，那么在第一个请求的答案到来之前，您不希望使用请求使服务器饱和。
您可以尝试一次附加多个字符。 尝试附加2或3个字符或更多字符。
动画速度取决于帧速率和帧之间的变化量。
是的，只需在displayText函数中添加两个字母（或更多）。 在for循环中执行此操作，您可以轻松调整变量。
替代方式
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);
DEMO。
或使用更近的
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);
DEMO。
但在IE它会更慢（仅在IE8，FF和Chrome中测试过）。