Question

我正在研究这个随机的东西。就像一个随机的Div徘徊。现在，当鼠标悬停时，该函数会启动但是如何在一段时间后自动停止名为animateDiv（）的函数。谢谢。这是代码。

html代码

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

和 jquery代码

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

Answer 1

这将在两秒后停止动画功能。我已经用评论'// new change'标记了我所做的更改。您可以使用setTimeOut函数控制动画运行的时间（以毫秒为单位）。我用了2秒钟。您也可以使用随机生成器设置此项以获得不同的时间跨度。

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

这是jsfiddle。检查控制台日志

这是如何工作的。在递归函数中开始动画之前，将animation标志设置为true。仅当此标志为true时，该函数才会调用自身。然后你启动一个saperate计时器，使animate标志为false，这将导致递归函数中断。

PS：原始问题中的动画代码无论如何都不起作用。但我没有尝试调试它，因为你的问题只是关于如何在一段时间后停止该功能。

Answer 2

你可以做一个setTimeout来阻止它。

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

这将在1秒后停止任何带有a类元素的动画。

Answer 3

您将不得不使用某种变量来检查是否要制作动画。

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

然后当你想要停止它时，你只需将do_animation设置为false。

Answer 4

您不需要停止它，而是在一段时间后不运行。只需设置一个条件来决定是否需要运行。

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

        });

如何在JavaScript中停止一段时间后递归函数？

4 个答案: