我制作了一个可以创建打字效果的小插件:
$.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。?是否有一些解决方法仍能以正确的顺序获取字母?
最佳答案
更改为 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);
};
关于iPad 上的 Javascript : typewriting effect shuffles chars when idling the tab,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33691169/