jQuery函數遞歸-我迷路了

Question

我是jQuery的新手，我不明白為什么我在控制台日志中看到“ if if”行。 如果toggleBox在“ if of結束”控制台日志行之前調用自身，如何處理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);

}）;

控制台輸出：

69387 1.輸入toggleBox。 i = 0

71398 2.淡出時間后。 i = 0

71399 1.輸入toggleBox。 i = 1

71400 3.如果結束。 i = 1

73396 2.淡出時間后。 i = 1

73397 1.輸入toggleBox。 i = 2

73397 3.如果結束。 i = 2

75398 2.淡出時間后。 i = 2

75399 1.輸入toggleBox。 i = 3

75399 3.如果結束。 i = 3

77399 2.淡出時間后。 i = 3

Answer 1

box.fadeToggle(2000; function

啟動fadeToggle並注冊回調，然后返回。 這意味着toggleBox(i); 立即返回而無需更深入，因此執行以下console.log 。

您必須意識到這並不是真正的遞歸，因為回調將僅在動畫之后稍后才被調用，從而使當前指令流繼續進行。 任何異步操作都會有相同的現象。