Javascript on iPad: 打字效果在空闲选项卡时打乱字符

Question

我制作了一个可以创建打字效果的小插件：

$.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

Answer 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

Javascript on iPad: 打字效果在空闲选项卡时打乱字符

Javascript on iPad: typewriting effect shuffles chars when idling the tab

javascript

settimeout

ipad