javascript - stopping a recursive function call onclick button1 from a different function onclick button2 -
i'm trying determine how stop recursive function call came click 'start_button' calling different function when 'stop_button' clicked.
- user clicks 'start_button' , slide down/up animation continues loop "infinitely" until...
- user clicks 'stop_button' , looped animations stop.
i'd keep 2 different buttons instead of having 1 dual-purpose start/stop button. code below, animation starts , loops, not stop when clicking stop button. i'd stop button stop animation when clicked.
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; } });
you calling infiniteloop synchronously, means impossible other javascript execute, click handler stop button. need make call asynchronous click handler can execute. use settimeout(infiniteloop, 0);
this, still won't behaviour want, because still aren't waiting slider slide before calling infiniteloop. instead should pass infiniteloop callback slideup. make asynchronous , make wait animation complete:
$('#top_message').slideup(2000, infiniteloop);
your updated jsfiddle.
Comments
Post a Comment