javascript - Chrome 和 jQuery 通过 for 循环进行多个append() 的奇怪问题

Question

我有类似打字机效果的代码，其中一个段落一次拼出一个字母，并有很短的时间延迟。它的工作原理是迭代 for 循环并将每个字母 append 到 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();
})

我还应该提到，我尝试使用 text() 和 html() 进行“append ”(例如 $('.codeWords').text($('.codeWords').text() + tw[i] );)，虽然这似乎降低了 chrome 中的错误率，但当您切换选项卡/最小化时，错误仍然发生。

这是 fiddle (尝试一下，看看我的意思):http://jsfiddle.net/Shambolaz/Xe56x/14/

感谢您的阅读。

编辑:查看 Michael 的答案，了解解决 Chrome 最小化时延迟超时调用问题的解决方案。

Answer 1

当选项卡处于后台时，超时可能会延迟，这会导致它们无序执行。一个简单的解决方法是始终触发前一个事件的下一个事件。也就是说，而不是:

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

...改为:

 delayPrint(tw, 0);

...与:

 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);
 }

在这两种情况下，您应该意识到时间不能保证均匀...如果您想让动画看起来平滑，您应该计算出自上次调用以来经过了多少时间，并使用它来确定在当前迭代中打印出多少个字符。