递归回调机制

Question

看到这个小提琴：http://jsfiddle.net/ym1aLk25/9/

var s = $('#shake');
var randomTran = function (flag) {
    flag = flag || 0;
    if (flag < 6) {
        var rh = Math.floor((Math.random() * 10) - 5),
            rv = Math.floor((Math.random() * 10) - 5);
        s.transit({x: rh,y: rv}, 50, randomTran.bind(this, ++flag))
    };
};
randomTran();
s.transit({x: 0,y: 0});

我试图让元素摇晃几秒钟，然后回到原来的位置。但它并没有像我预期的那样工作，问题出在回调函数上。根据这个问题：If a jQuery function calls itself in its completion callback, is that a recursive danger to the stack?，似乎回调仍在循环中，回调函数之后的代码也在执行。 那么除了设置超时之外，如何实现我的目标呢？我在哪里可以找到关于这个机制的更详细的解释？

Answer 1

您的小提琴按预期工作，并且动画排队（如果.transit() 被重复调用多次，它们甚至会排队，因为插件使用 jQuery 的内部动画队列）。唯一的问题是 50 毫秒对于最多 5 个像素的动画来说太快了。我增加了时间并打印了计数器in this revision of your fiddle。

看来，虽然回调还在循环，但回调函数后面的代码也在执行。

没有“循环回调”。回调传递到returns before回调被调用的函数-调用.transit()的代码继续（ ，在您的情况下，是 if 的结束 } 大括号、randomTran() 调用的结尾和 s.transit({x: 0,y: 0}); 初始化。

一旦这段代码执行完毕，其他代码就可以异步执行了。存储在某处的回调现在 - 将来，在 transit() 调用后 50 毫秒 - 被调用；确实开始另一个过渡，确实安排另一个回调，然后结束。

Answer 2

您的 randomTran 函数中没有回调，因此它异步运行。这意味着 randomtran() 开始，紧随其后的是 s.transit({x: 0,y: 0});被执行。

你可以运行 s.transit({x: 0,y: 0});在 randomTran 的回调中让它在其余部分之后执行：

var s = $('#shake');
var randomTran = function (flag,callback) {
    flag = flag || 0;
    if (flag < 6) {
        var rh = Math.floor((Math.random() * 10) - 5),
            rv = Math.floor((Math.random() * 10) - 5);
        s.transit({x: rh,y: rv}, 50, randomTran.bind(this, ++flag))
    }else{
      callback();
    }
};
randomTran(0,function(){ //0 is added because randomTran expects flag as first param
  s.transit({x: 0,y: 0}); //this will be executed after randomtran calls back, eg when flag=6
});

但是...恐怕你把事情复杂化了，我不确定你想要达到什么目标。