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

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

1 个答案: