jquery: Exiting function

Question

I am doing animation in jquery. I have a looping picture moving from left to right of the webpage. I used following code:

 function run() {  $("#run").animate({ left: "980px" }, 250).animate({
  left: "-600px" }, 0);   setTimeout("run()", 250);
 }

I want to stop the loop(OR break the function) once I press a button.

"stop the loop" as in "stop the animation directly"? If so, you can look into .stop as well (in addition to clearing the interval). — pimvdb
– pimvdb, Commented Mar 14, 2012 at 15:57
setTimeout can take a function as a parameter: setTimeout(run, 250) — jbabey
– jbabey, Commented Mar 14, 2012 at 16:01

Andrew · Accepted Answer · 2012-03-14 15:56:32Z

3

setTimeout returns a vlaue that can be used to cancel it,

//Start
var ref = setTimeout(...);
//Stop
clearTimeout(ref);

Also, if just using a function, it is safer to just pass that than forcing an eval,

setTimeout(run, 250);

answered Mar 14, 2012 at 15:56

Andrew

13.9k14 gold badges70 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JaredPar · Accepted Answer · 2012-03-14 15:57:10Z

0

It sounds like you want this animation to run until the user presses a button. For that I would set up a setInterval loop and use clearInterval to stop it on the button click

var runTimer = setInterval(function() {
  $("#run").animate({ left: "980px" }, 250).animate({ left: "-600px" }, 0);   
}, 250);

$('#stopAnimation').click(function () {
  clearInterval(runTimer);
}

answered Mar 14, 2012 at 15:57

JaredPar

759k152 gold badges1.3k silver badges1.5k bronze badges

2 Comments

jbabey Over a year ago

"setInternal" should be "setInterval" for all you copy-pasters :P

JaredPar Over a year ago

@jbabey thanks, I can't tell you how many times i've made that spelling mistake :(

Daniel A. White · Accepted Answer · 2012-03-14 15:57:15Z

0

You want to call clear timeout.

var timeout;

 function run() {  $("#run").animate({ left: "980px" }, 250).animate({
  left: "-600px" }, 0); 
   timeout =setTimeout("run()", 250);
 }
 function cancel() { clearTimeout(timeout); }

answered Mar 14, 2012 at 15:57

Daniel A. White

192k49 gold badges389 silver badges473 bronze badges

Comments

Austin Brunkhorst · Accepted Answer · 2012-03-14 15:57:51Z

0

try the method stop() before each animation

function run() { 
    $("#run").stop().animate({ left: "980px" }, 250, function(){
        $(this).css('left', '-600px');
    });
    setTimeout("run()", 250); 
}

answered Mar 14, 2012 at 15:57

Austin Brunkhorst

21.1k6 gold badges49 silver badges61 bronze badges

1 Comment

jbabey Over a year ago

setTimeout can take a function as a parameter: setTimeout(run, 250)

Collectives™ on Stack Overflow

jquery: Exiting function

4 Answers 4

Comments

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related