Question

I have an animation that is set to play after a timeout. This animation repeats itself over on different elements after it completes. I’m utilizing the animate method’s callback function to initiate the next animation. My extracted code looks like:

function fancyAnimation() {
    // Get a random object property, which is actually the id for a dot
    var id = getRandomNumber( 1, 100 );

    // Apply an effect to the dot
    $( '#test' + id ).effect(
        'pulsate',
        { times : 3 },
        1000,
        fancyAnimation
    );
}

On a click event, I want the animations to stop. At any given time, the “fancyAnimation” function is queued to run, which just queues it again and again and so forth.

Is there a way that I can stop this function from executing, thereby ending the infinite loop on a certain event? If so, how would you do this?

Thank you so much!

EDIT: By request, the code that initiates fancyAnimation.

function initiateFancyAnimation() {
    animation_timeout = setTimeout( "fancyAnimation()", animation_interval );
}

Answer 1

Well, the easy way would be to set a global flag that you check each time the function runs:

var runAnimation;

function fancyAnimation() {
    if (runAnimation) {
        // your function body as written
    }
}

$('#start').click(function() {
    runAnimation = true;
    fancyAnimation();
});

$('#stop').click(function() {
    runAnimation = false;
});