Repeat MinifiedJS function X times?

I am using the library at minifiedjs.com. Using that script, I have a div blinking twice:

vbox1.animate({$backgroundColor: 'grey'}, 100)
.then(function() { return vbox1.animate({$backgroundColor: 'transparent'}, 100) })
.then(function() { return vbox1.animate({$backgroundColor: 'grey'}, 100) })

As you can see, it simply sets the background to grey, back to transparent, and then back to grey again. The problem is, I want this div to blink X number of times.

I know I could do this by simply chaining more .then() animations; but that seems a bit repetitive. Anyone mind helping me out on cleaning this up?

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

Solution

the promise-y way:

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

i use next.total instead of x, but the main idea is to self-call from the tail until you're done instead of looping/queing ahead of time.

EDIT:

as a re-usable (allows custom target, delay, and # of reps):

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

to use like before: animateMyStuff(vbox1, 100, 100); , or with defaults, animateMyStuff(vbox1);