iPad上的Javascript：闲置标签时打字效果会随机播放字符答案

【问题标题】：Javascript on iPad: typewriting effect shuffles chars when idling the tabiPad上的Javascript：闲置标签时打字效果会随机播放字符
【发布时间】：2015-11-13 10:57:38
【问题描述】：

我做了一个小插件，可以产生打字效果：

$.fn.typewriter = function(options) {
    var $this = this,
        defaults = {
            text: "",
            animationDelay: 70,
            callback: null,
            callbackData: null
        },
        settings = $.extend(defaults, options);

    $.each(settings.text.split(''), function (i, letter) {
        setTimeout(function() {
            $this.text($this.text() + letter);

            if(i === settings.text.length - 1) {
                settings.callback(settings.callbackData);
            }

        }, settings.animationDelay * i);
    });
};

这很好用，但是在 iPad 上，当效果进行时，我会更改选项卡并稍后返回，在此空闲时间打印的所有字母都会随机打乱。这不会在桌面上发生。

我想这与我闲置选项卡时 javascript 执行的闲置有关。它似乎与浏览器无关。所以我猜iPad会同时执行所有空闲的setTimeouts。？是否有一些解决方法仍然可以按正确的顺序获取字母？

JSFIDDLE

【问题讨论】：

标签： javascript ipad settimeout

【解决方案1】：

更改为setInterval 似乎可以解决问题：

$.fn.typewriter = function(options) {
    var $this = this,
        defaults = {
            text: "",
            animationDelay: 70,
            callback: null,
            callbackData: null
        },
        settings = $.extend(defaults, options),
        timer;

    settings.text= settings.text.split('');
    timer= setInterval(function() {
      $this.append(settings.text[0]);
      settings.text.shift();
      if(!settings.text.length) {
        clearInterval(timer);
        if(settings.callback) {
          settings.callback(settings.callbackData);
        }
      }
    }, settings.animationDelay);
};

Fiddle

【讨论】：