Повторить функцию 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

обещание-й способ:

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 вместо х, но основная идея заключается в том, чтобы сам-вызов от хвоста до тех пор, пока вы сделали вместо зацикливания/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);

Answer 2

Используйте цикл:

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, сколько вам нужно.