How to stop recursive function after some time in JavaScript?

Question

i am working on this random stuff here. like a random Div hovering around. Now when mouse is hovered the function starts but how can I automatically stop the function called animateDiv() after some time. thanks. here is the code.

html code

<div class="a">
    <button id="myButton">Click Me ;)</button>
</div>

and jquery code

$(document).ready(function () {
    $('.a').mouseenter(function() {
         animateDiv();

    });
});

function makeNewPosition() {      
   var h = $(window).height() - 50;
   var w = $(window).width() - 50;
   var nh = Math.floor(Math.random() * h);
   var nw = Math.floor(Math.random() * w);

   return [nh, nw];
}

function animateDiv() {
   var newq = makeNewPosition();
   $('.a').animate( 
      {top: newq[0], 
       left: newq[1], }
      ,400, function () {
            animateDiv();
       });
    };

set a global flag and check it on the step function you can pass to animate — Rooster
– Rooster, Commented Aug 13, 2013 at 14:37
i want to change it after some seconds when the mouse is hovered over the button. — designerNProgrammer
– designerNProgrammer, Commented Aug 13, 2013 at 14:42
This looks like a bad implementation. the anonymous callback function for animate() needs to save its context, so it will stay in memory. its way better to use setTimeout and clearTimeout instead. — yoavmatchulsky
– yoavmatchulsky, Commented Aug 13, 2013 at 14:42

Shaunak · Accepted Answer · 2013-08-13 15:11:27Z

Here this will stop the animate function after two seconds. I have marked the changes I made with the comment '//new change'. You can control the time in milliseconds the animation runs using the setTimeOut function. I have used 2 seconds for example. You can also set this using a random generator to get different time spans.

var animate = false; //new change

$(function () {
    $('.a').mouseenter(function() {
        animate = true;//new change
        animateDiv();
        setTimeout(function(){animate = false },2000)//new change
    });
});

function makeNewPosition() {      
   var h = $(window).height() - 50;
   var w = $(window).width() - 50;
   var nh = Math.floor(Math.random() * h);
   var nw = Math.floor(Math.random() * w);

   return [nh, nw];
}

function animateDiv() {
   var newq = makeNewPosition();
   console.log(newq);
    $('.a').animate( 
      {top: newq[0], 
       left: newq[1], }
      ,400, function () {
            if(animate) animateDiv();//new change
       });
    };

Here is a jsfiddle. Check the console log

Here is how this works. Before you begin animation in recursive function you set animation flag to true. The function calls itself only if this flag is true. Then you start a saperate timer which make animate flag false, which will cause the recursive function to break.

PS: The animation code in your original question doesn't work anyway. But i didn't try to debug it as your question was only about how to stop the function after a while.

David MacCrimmon · Accepted Answer · 2013-08-13 14:38:42Z

0

You could do a setTimeout to stop it.

setTimeout(function (){
    $('.a').stop();
}, "1000");

This will stop any animations present on any element with the class a after 1 second.

answered Aug 13, 2013 at 14:38

David MacCrimmon

9661 gold badge6 silver badges19 bronze badges

Comments

putvande · Accepted Answer · 2013-08-13 14:39:10Z

0

You are going to have to use some sort of variable to check if you want to animate or not.

var do_animation = true;
function animateDiv() {
    var newq = makeNewPosition();
    $('.a').animate({
         top: newq[0],
         left: newq[1],
     }, 400, function () {
         if(do_animation) // The condition, if false this will not execute.
             animateDiv();
     });
};

And then when you want to stop it you just set do_animation to false.

answered Aug 13, 2013 at 14:39

putvande

15.3k3 gold badges37 silver badges51 bronze badges

Comments

Billy Moon · Accepted Answer · 2013-08-13 14:39:17Z

0

You don't need to stop it, but rather to not run it after a while. Just put a condition in to decide if it needs to be run or not.

    $('.a').animate(
        { top: newq[0], left: newq[1], },400, function ()
        {
            // put a condition here
            if(Math.random() > .01){ // will stop after a while
                animateDiv();
            }

        });

answered Aug 13, 2013 at 14:39

Billy Moon

58.9k27 gold badges148 silver badges244 bronze badges

Collectives™ on Stack Overflow

How to stop recursive function after some time in JavaScript?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related