Javascript jQuery函数递归-I'；我迷路了

我是jQuery新手，我不明白为什么我会在控制台日志中看到这个“如果结束”行。如果toggleBox在“If结束”控制台日志行之前调用自身，那么console.log（）函数是如何处理的

看起来1号线和2号线只是重复，但不知怎么的，3号线正在运行。它看起来就像是在跳来跳去。toggleBox调用是否会在调用box.fadeToggle之前跳回自身，完成if块，然后出于某种原因跳回box.fadeToggle

$(document).ready(function() {
var box     = $("#box");
var para = $("p");
var i   = 0;

para.text(i);

function toggleBox(i) {
    console.log($.now() + " 1. entering toggleBox. i=" + i);
    box.fadeToggle(2000, function() {
        console.log($.now() + " 2. after fade time. i=" + i);
        i++;
        if (i < 4) {
            para.text(i);
            toggleBox(i);
            console.log($.now() + " 3. end of if. i=" + i);
        };
    });
};

toggleBox(i);

$（文档）.ready（函数（）{
变量框=$（“#框”）；
var para=$（“p”）；
var i=0；
第（i）段；
功能切换框（一）{
console.log（$.now（）+“1.输入toggleBox.i=“+i”）；
box.fadeToggle（2000，函数（）{
console.log（$.now（）+“2.淡入淡出时间后。i=“+i”）；
i++；
if（i<4）{
第（i）段；
开关箱（一）；
console.log（$.now（）+“3.end of if.i=“+i”）；
};
});
};
开关箱（一）；

}))

控制台输出：

69387 1。进入切换框。i=0

713982。在淡出时间之后。i=0

71399 1。进入切换框。i=1

714003。如果结束。i=1

73396 2。在淡出时间之后。i=1

73397 1。进入切换框。i=2

73397 3。如果结束。i=2

753982。在淡出时间之后。i=2

75399 1。进入切换框。i=3

75399 3。如果结束。i=3

77399 2。在淡出时间之后。i=3

box.fadeToggle(2000; function

启动fadeToggle并注册回调，然后返回。这意味着

切换框（i）

立即返回而不深入，因此执行以下

console.log

---

您必须意识到这并不是一个真正的递归，因为回调只会在动画之后调用，从而让当前指令流继续。任何异步操作都会出现同样的现象。

异步部分从回调到

fadeToggle（）

开始。这就是流程将发生变化的地方，也是您在看到

3.

之前返回

1.

的原因。把

3.

放在

切换框（i）

之前，它会更像你所期待的。啊哈。那么有两个“线程”在运行？我现在看到fadeToggle发送了一个时间限制，该函数倒计时（在某个地方），然后运行回调函数，而我自己的代码不知何故同时运行。这就是你所说的异步吗？差不多。它实际上是一个单线程，但有一个调度器供以后执行。JavaScript动画的工作方式是使用异步函数调用（通过

setTimeout

或

setInterval

）递增地调整CSS属性。如果他们不异步执行此操作，则单个线程将被阻塞，直到动画完成，因此整个窗口环境将被锁定。然后是的，在完整的动画完成后，你的回调函数将被调用。所以它可以同时做两件事？API描述说“如果提供，则在动画完成后会触发回调。”所以fadeToggle正在运行（我猜是向上还是向下计数），而这个文件app.js中的代码继续运行？这就是您引用的异步操作吗？我应该理解jQuery函数可以在我自己的代码执行时运行吗？是的，动画是使用setInterval和setTimeout处理的：大多数时候JS线程什么都不做。因此，任何启动动画的函数都将立即结束。这也是为什么回调是必要的，因为由于启动函数立即完成，您没有其他方法知道动画何时结束。