我正在使用 minifiedjs.com 上的库。使用该脚本,我有一个 div 闪烁两次:
vbox1.animate({$backgroundColor: 'grey'}, 100)
.then(function() { return vbox1.animate({$backgroundColor: 'transparent'}, 100) })
.then(function() { return vbox1.animate({$backgroundColor: 'grey'}, 100) })
如您所见,它只是将背景设置为灰色,然后设置为透明,然后再次设置为灰色。问题是,我希望这个 div 闪烁 X
次。
我知道我可以通过简单地链接更多 .then()
动画来做到这一点;但这似乎有点重复。有人介意帮我清理这个吗?
vbox1.animate({$backgroundColor: 'grey'}, 100)
.then(function() { return vbox1.animate({$backgroundColor: 'transparent'}, 100) })
.then(function() { return vbox1.animate({$backgroundColor: 'grey'}, 100) })
.then(function() { return vbox1.animate({$backgroundColor: 'transparent'}, 100) })
.then(function() { return vbox1.animate({$backgroundColor: 'grey'}, 100) })
.then(function() { return vbox1.animate({$backgroundColor: 'transparent'}, 100) })
.then(function() { return vbox1.animate({$backgroundColor: 'grey'}, 100) })
.then(function() { return vbox1.animate({$backgroundColor: 'transparent'}, 100) })
.then(function() { return vbox1.animate({$backgroundColor: 'grey'}, 100) })
.then(function() { return vbox1.animate({$backgroundColor: 'transparent'}, 100) })
.then(function() { return vbox1.animate({$backgroundColor: 'grey'}, 100) })
.then(function() { return vbox1.animate({$backgroundColor: 'transparent'}, 100) })
.then(function() { return vbox1.animate({$backgroundColor: 'grey'}, 100) })
.then(function() { return vbox1.animate({$backgroundColor: 'transparent'}, 100) })
.then(function() { return vbox1.animate({$backgroundColor: 'grey'}, 100) })
.then(function() { return vbox1.animate({$backgroundColor: 'transparent'}, 100) })
.then(function() { return vbox1.animate({$backgroundColor: 'grey'}, 100) })
.then(function() { return vbox1.animate({$backgroundColor: 'transparent'}, 100) })
.then(function() { return vbox1.animate({$backgroundColor: 'grey'}, 100) })
.then(function() { return vbox1.animate({$backgroundColor: 'transparent'}, 100) })
.then(function() { return vbox1.animate({$backgroundColor: 'grey'}, 100) })
最佳答案
promise 的方式:
function next() {
return vbox1.animate({$backgroundColor: 'transparent'}, 100)
.then(function() { return vbox1.animate({$backgroundColor: 'grey'}, 100) })
.then(next.total-- ? next : Boolean);
}
next.total=100;
vbox1.animate({$backgroundColor: 'grey'}, 100).then(next);
我使用next.total而不是x,但主要思想是从尾部进行自调用,直到完成,而不是在之前循环/排队时间。
编辑:
作为可重复使用的(允许自定义目标、延迟和次数):
function animateMyStuff(target, period, reps){
reps=+reps||100; //default and coerce to real number
period=+period||100; //default and coerce to real number
function next() {
return target.animate({$backgroundColor: 'transparent'}, period)
.then(function() { return target.animate({$backgroundColor: 'grey'}, period) })
.then(reps-- ? next : Boolean);
}
return target.animate({$backgroundColor: 'grey'}, period).then(next);
}
像以前一样使用: animateMyStuff(vbox1, 100, 100);
,或使用默认值 animateMyStuff(vbox1);
关于javascript - 重复 MinifiedJS 函数 X 次?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28752235/