Повторите функцию 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 вместо 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);

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