重复 MinifiedJS 函数 X 次？

Question

我正在 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) })

Answer 1

使用循环：

var animation = vbox1.animate({$backgroundColor: 'grey'}, 100)
     .then(function() { return vbox1.animate({$backgroundColor: 'transparent'}, 100) });
for (var i=0; i < numberOfBlinks - 1; i++) {
    animation = animation.then(function() { return vbox1.animate({$backgroundColor: 'grey'}, 100) })
                .then(function() { return vbox1.animate({$backgroundColor: 'transparent'}, 100) });
}

您只需根据需要添加任意数量的 .then。

Answer 2

承诺方式：

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，但是主要思路是从尾部自己调用直到你提前完成而不是looping/queing。

编辑：

作为可重复使用的（允许自定义目标、延迟和重复次数）：

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);

重复 MinifiedJS 函数 X 次？

Repeat MinifiedJS function X times?

javascript

minifiedjs