所以我有这个简洁的小 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 中运行它。如果 chrome 似乎比 FF 更早完成，那么这就是卡住故障。如果您调整浏览器大小或以任何方式修改页面，那么所有剩余的文本突然会立即出现。
最佳答案
如果您不将每个字符附加为单独的节点，而是在每次调用 writeOneLetter 函数时刷新跨度的整个文本内容，这似乎可行:
function writeOneLetter(myString)
{
var char = myString[letterIndex];
$('#display').text($('#display').text()+char);
letterIndex++;
if (letterIndex >= myString.length)
{
letterIndex = 0;
clearInterval(intervalId);
}
}
关于javascript - 我需要一个 safari/chrome bug 的解决方法，这个 bug 正在成为我的眼中钉，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4265710/