Che*_*hev 6 html javascript safari jquery google-chrome
所以我有这个简洁的小javascript函数,我用它以一种很酷的命令提示样式将文本打印到浏览器窗口.它需要一个字符串,并以设定的间隔一次将一个字符打印到窗口.这是:(我已经删除了所有不必要的部分,以便这可以作为一个独立的例子.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
var letterIndex = 0;
var intervalId = 0;
function writeOneLetter(myString)
{
var char = myString[letterIndex];
$('#display').append(char);
letterIndex++;
if (letterIndex >= myString.length)
{
letterIndex = 0;
clearInterval(intervalId);
}
}
$(function ()
{
$('#caret').html('\u2588'); //This will help you visualize where the script is at in it's sequence and make it painfully obvious when the freezing issue occurs.
// The following string sample is so long because it is important that you be able to duplicate this error to understand my question.
var myString = "Quisque vestibulum consequat orci, in euismod tortor dapibus eu. Duis nec urna nec erat sagittis pretium vel ac diam. Nulla mi lorem, tempor ut cursus in, mattis non libero. Curabitur eget venenatis justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas blandit ante in ligula tincidunt quis vehicula massa scelerisque. Pellentesque nec posuere massa. Sed eget nunc a erat dictum faucibus. In vitae tempor lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel imperdiet tellus. Suspendisse ultricies sem a libero sagittis feugiat. Ut convallis magna eu mauris molestie dapibus. Nulla feugiat urna non ante facilisis non ultrices nisi viverra. Aliquam vitae magna libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur at odio sit amet nisi dapibus scelerisque. In fringilla lorem at sapien rutrum scelerisque."
intervalId = setInterval(function () { writeOneLetter(myString); }, 15);
});
</script>
</head>
<body>
<span id="display">
</span><span id="caret"></span>
</body>
</html>
到这里http://www.jsfiddle.net/Chevex/6n5VV/试试上面的示例代码.
如果你在IE或FF中,代码将完全按预期运行,写出字符串中的每个字符,直到它完成.但是,如果您在Chrome或Safari中运行此代码,则会遇到一个有趣的错误.有时,当线条击中其容器的一侧并且单词换行并下降到下一行时,它会冻结.键入停止呈现给浏览器,但它仍然发生在DOM中,因为如果页面被修改或浏览器调整大小,则剩余的文本会一次显示.
我注意到的一些事情是,只有当它下降到具有前导空格的线时才会发生.此外,如果您在脚本仍在运行时或脚本完成后调整浏览器窗口大小,它将突然恢复运行,您将看到文本的其余部分.任何调整大小,最大化等等都会使字母重新出现; 当然只是稍后再冻结.
这是非常令人沮丧的,因为它永远不会显示字符串的其余部分,除非页面被更多的javascript修改或浏览器调整大小.当这种情况发生时,它完全违背了编写脚本的整个目的.
有任何想法吗？我完全被难倒了,谷歌什么都没有.
编辑:
如果您无法重现错误,可能是因为您的屏幕分辨率与我自己不同,您很幸运.尝试调整浏览器窗口,jsFiddle显示容器或两者的大小,然后再次运行脚本.在你看到它冻结之前不应该花太多时间.尝试瞄准,以便其中一条线将自动换行,这似乎是它发生的地方.
我在3台不同的计算机上使用chrome和safari完成了这项工作,其中一台完全不同的网络.如果你仍然看不到错误,那么在chrome和firefox中并排运行它.如果铬似乎早于FF完成那么这就是行动中的冻结故障.如果您以任何方式调整浏览器大小或修改页面,则会突然显示所有剩余文本.
如果您不将每个char作为单个节点附加,但每次调用writeOneLetter函数时刷新span的整个文本内容,它似乎都有效:
function writeOneLetter(myString)
{
var char = myString[letterIndex];
$('#display').text($('#display').text()+char);
letterIndex++;
if (letterIndex >= myString.length)
{
letterIndex = 0;
clearInterval(intervalId);
}
}
在这里试试:http: //www.jsfiddle.net/5R3JP/
| 归档时间： |
|
| 查看次数： |
465 次 |
| 最近记录： |