Question

我正在读关于递归函数我读到当我们使用递归函数时它调用一个堆栈帧，所以如果我们最终调用递归函数10000次，那么可能是可用内存的问题。我有一个函数下面是否正确使用递归？或者你认为我应该避免它？

function animateLeft(obj, top){
   if(top >= 300){         
       obj.style.visibility = 'visible';
       return;  
   }
   else {
       var box = obj;
       box.style.marginLeft = top + "px";
       box.style.marginTop = top + "px";
       setTimeout(function(){
           animateLeft(obj, top + 1);
       }, 25) 
   }
}
function animateMe() {
    animateLeft(document.getElementById('inner-rectange'), 0);
}

Answer 1

使用setTimeout意味着您的代码不会直接递归调用动画函数。这将导致重复调用该函数，但不会导致深层堆栈的创建。

对于动画来说，这是一种非常合理的方法（有更好的方法，例如requestAnimationFrame，但这是合理的！）

Answer 2

由于您从setTimeout调用方法，因此您并未真正使用递归。

当函数重新执行时，初始化将退出..（每次执行都不会阻止下一个）

在javascript中使用递归来处理操作DOM的东西是错误的，因为只有在整个递归完成后才会重新绘制页面。所以你将失去动画的所有中间步骤并从第1步到最后

正如对问题的评论所提到的那样，你可以单独使用CSS实现这种动画。

只需通过CSS设置DOM节点的transition property，然后通过应用新类（或直接通过javascript ）更改属性

div{
    margin-left:0;
    margin-top:0;

    -moz-transition:margin 2s linear;
    -webkit-transition:margin 2s linear;
    transition:all 2s linear;
}

.move{
    margin-left:100px;
    margin-top:100px;
}

请参阅 http://jsfiddle.net/gaby/rm3EP/

上的演示

（当您将move类应用于div CSS时，将设置边距更改的动画。）

Answer 3

我不会使用递归来做到这一点。我甚至不确定jQuery或其他东西是否会做得更好。

当我处理像树这样的递归数据结构时，我认为首先是递归，但不适用于这样的情况。

Answer 4

您的示例更像是延迟递归函数。由于setTimeout，内存应该没有问题。目前的动画片Left将完成，之后的下一个将完成。

Answer 5

我知道这已经很晚了，但我最近一直在寻找Recursive函数。我的最佳答案是，只有当您不知道运行一段代码需要多少次或者您拥有某些类型的数据结构（例如树）时才使用递归函数堆栈

何时使用递归函数？

5 个答案: