stopping a recursive function call onclick button1 from a different function onclick button2

Question

I'm trying to determine how to stop a recursive function call that came from a click to 'start_button' by calling a different function when 'stop_button' is clicked.

• User clicks 'start_button' and the slide down/up animation continues to loop "infinitely" until...
• User clicks 'stop_button' and the looped animations will stop.

I'd like to keep two different buttons instead of having one dual-purpose start/stop button. With my code below, the animation starts and loops, but does not stop when clicking the stop button. I'd like for the stop button to stop the animation when clicked.

http://jsfiddle.net/ZdtmZ/

var stopSliding = false;

$('#stop_button').click(function(){
        stopSliding = true;
});

$('#start_button').click(function infiniteLoop(){
    if (stopSliding == true)
    {
        $('#top_message').stop();
        return;
    }       
    else
    {
        $('#top_message').hide().slideDown(2000);
        $('#top_message').slideUp(2000);    
        infiniteLoop();
        return;
    }
});

Answer 1

You are calling infiniteLoop synchronously, this means that it is impossible for any other Javascript to execute, like the click handler for your stop button. You need to make the call asynchronous so that your click handler can execute. You could use setTimeout(infiniteLoop, 0); to do this, but you still won't get the behaviour you want, because you still aren't waiting for the slider to slide up before calling infiniteLoop. So instead you should pass infiniteLoop as a callback to slideUp. That will make it asynchronous and make it wait for the animation to complete:

$('#top_message').slideUp(2000, infiniteLoop);

Your updated JSFiddle .

Answer 2

The problem is probably, that by the time you want to stop your animation, there are still numerous animations waiting in the queue to be executed (since your code runs way faster than the actual animations). By providing the optional argument clearQueue of the stop function, you can delete all waiting animations:

$('#top_message').stop(true)

Answer 3

I would write this like :

$('#start_button').click( function() {
    if ( stopSliding ) return false;
    $('#top_message').hide().slideDown(2000, function() {
          $('#top_message').slideUp(2000, $('#start_button').click);
    });
    return false;
});

$('#stop_button').click( function() {
    stopSliding = true;
    $('#top_message').stop();
});

Answer 4

I just did reset the stopSliding variable to flase this way it does not stop animation if you click again on start animation .

jsfiddle

var stopSliding = false;

$('#stop_button').click(function(){
    stopSliding = true;
});

$('#slide_button').click(function infiniteLoop(){
    if (stopSliding == true)
    {
        $('#top_message').stop();
        stopSliding = false;
        return;
    }       
    else
    {
        $('#top_message').hide().slideDown(2000);
        $('#top_message').slideUp(2000, infiniteLoop);
        return;
    }
});