Question

我有类似打字机效果的代码，其中段落一次拼写一个字母，时间很短。它通过迭代for循环并将每个字母附加到div来工作。这是一个奇怪的部分：如果你在Chrome运行时切换标签或最小化Chrome，它会混乱并打印乱码，但是如果你留在它运行的标签上，它就可以正常工作。在Firefox中，它可以正常工作，更改标签时没有任何奇怪之处。到底是怎么回事？这是我的代码：

$(function () {

var global_tw = "Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing.";
var codeWordsFlag = false;

function typewriter () { 
    var tw = global_tw.split('');

        for (i = 0; i <= tw.length; i++) {
            delayPrint(i);
        };


    function delayPrint(i) {
        setTimeout(function(){
            $('.codeWords').append(tw[i]);
        }, 75*i); //75
    };
    codeWordsFlag = true;
};
typewriter();
})

我还应该提一下，我试过＆＃34;追加＆＃34;使用text（）和html（）（例如，$（＆＃39; .codeWords＆＃39;）。text（$（＆＃39; .codeWords＆＃39;）。text（）+ tw [i]）;）虽然这似乎降低了chrome中的错误率，但当你切换标签/最小化时，仍然会发生错误。

这里是小提琴（尝试一下，看看我的意思）：http://jsfiddle.net/Shambolaz/Xe56x/14/

感谢阅读。

编辑：检查迈克尔的答案，以解决在Chrome最小化时解决延迟超时调用的问题。

Answer 1

当选项卡背景时，超时可能会延迟，这会导致这些超时无序执行。一个简单的解决方法是始终从前一个事件触发下一个事件。也就是说，而不是：

for (var i = 0; i < tw.length; ++i) {
  delayPrint(i);
}

...改为：

 delayPrint(tw, 0);

... with：

 function delayPrint(arr, index) {
   if (index >= arr.length) {
     return;
   }
   setTimeout(function() {
     printElement(arr[index]);
     delayPrint(arr, index+1);
   }, 75);
 }

 function printElement(str) {
   $('.codeWords').append(str);
 }

在这两种情况下，你应该知道时间不能保证是均匀的......如果你想让动画看起来很流畅，你应该弄清楚自上次调用以来经过了多少时间，并使用它来确定在当前迭代中打印出的字符数。

Answer 2

尝试使用jQuery promises打印出来的字母。因此，每个印刷品都必须等待先前的印刷完成。

现在我认为问题是浏览器在上一个完成之前创建多个打印语句，然后随机选择一个新创建的打印事件来运行。

如果您需要代码示例，请告诉我。 :)：）

通过for-loop，Chrome和jQuery多个append（）的奇怪问题

2 个答案: