Canceling/Stopping a callback function from executing in jQuery/Javascript

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

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

You could apply a certain class to the 'dot' when the user clicks the item and then check for that class on each loop like this:

$('#button').click(function(){
    $('#targetDot').addClass('stop');
});

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

    // Check for Class and Execute ONLY is .stop is not found //
    if ($(id).hasClass('stop') !== true ){
        // Apply an effect to the dot
        $( '#test' + id ).effect(
            'pulsate',
            { times : 3 },
            1000,
            fancyAnimation
        );
    }
}

EDIT:

An alternative that I've used in the past is a plugin called $.doTimeout which allows for the callback to be controlled a little better.

With this plugin you could do something like this:

$.doTimeout('timeoutID', 3000, function() {
    // Check for Global Run True / False Flag //
    if (runAnimation){
        fancyAnimation();
    }
});

Not sure if this helps as the callback is still run; however it would allow you to pause the actual animation function from running.

Now that functional reactive programming has arrived, here's one way to do it in this style using BaconJS (though it's not any shorter).

$('#start').click(function(){  
    // open event bus
    var eventBus = new Bacon.Bus();

    // tell eventBus to run animation every time it receives event
    eventBus.onValue(function(){
        fancyAnimation();
    });

    // push initial event to start animation immediately
    eventBus.push();

    // continue to push events at interval
    eventBus.plug(Bacon.fromPoll(animation_interval, function(){
        return new Bacon.Next();
    }));

    $("#start").attr("disabled", "disabled");
    $("#stop").removeAttr("disabled"); 

    // tell eventBus to end when stop is clicked
    $('#stop').click(function(){
        eventBus.end();

        $("#stop").attr("disabled", "disabled");
        $("#start").removeAttr("disabled");   
    });
});

Working demo at http://jsfiddle.net/ronaldchanou/o4hk0176/2/