Question

I have a function that loops on itself. I’m still wrapping my head around how this works and I hope you can help.

Basically I have the following function

function parachute_drop(animation_duration) {
$('#parachute_wrap_2')
        .animate({top: "750px"},animation_duration)
        .animate(
           {top:"-150px"},
           {duration: 0, complete: parachute_drop("'+animation_duration+'")}
        );
}

parachute_drop(90000);

In my head, this should loop itself and where ‘animation_duration’ occurs inside the function it should end up with whatever number I put in the call to the function.

The idea is that above over 90 seconds, a parachute falls down 750px. Then in the space of 0 ms, it goes back to the top and off the screen at -150px.

If I were to do:

parachute_drop(1000);

Then this loop would happen every 1 second.

What don’t I understand about functions here – am I unable to put a ‘complete’ function in with some variables like this? I know that if I took out the ‘animation_duration’ part out of the function entirely and just put in a fixed duration into it that it works fine.

For example the following works:

function parachute_drop() {
$('#parachute_wrap_2')
        .animate({top: "750px"},9000)
        .animate(
           {top:"-150px"},
           {duration: 0, complete: parachute_drop}
        );
}

parachute_drop();

… but then my function doesn’t have the custom variable options. Thanks for any pointers.

Answer 1

You mean like this? (anonymous function with scope binding)

function parachute_drop(animation_duration) {
    $('#parachute_wrap_2')
        .animate({ top: "750px" }, animation_duration)
        .animate({
            top:"-150px"
        }, {
            duration: 0,
            complete: function () {
                parachute_drop(animation_duration);
            }
        });
}

parachute_drop(90000);

A problem here is that parachute_drop will keep calling itself, so your callstack will grow infinitely. This can be a problem if your animation is expected to run many times (as in: unattended for days). I’m not sure where the cut-off point is for most browsers.