Repeat MinifiedJS function X times?

Question

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

How would you do this? All loops I've done execute all the loops instantly and don't follow the animation timings. — Jason Axelrod, Feb 26 '15 at 20:38
It returns a promise (i'm assuming). That's how the chaining works. You just need to add more `.then` functions in the loop. — Matt Burland, Feb 26 '15 at 20:40

dandavis · Accepted Answer · 2015-02-26T21:00:27.137

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

Hmm... this is nice... can I request a small change though? Right now vbox1 target is hard coded into the `next` function. Can you change it so that I can pass a target into the function instead? — Jason Axelrod, Feb 26 '15 at 20:56

score 0 · Answer 2 · answered Feb 26 '15 at 20:40

Use a loop:

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

You just append as many .then as you need.

I cant get this working at all... its not chaining the animations. — Jason Axelrod, Feb 26 '15 at 20:49

Repeat MinifiedJS function X times?

2 Answers2