Wieża Hanoi - JavaScript - The Good Parts

Question

Widziałem inne pytania dotyczące SO o funkcji rekurencyjnych i czytałem odpowiedzi, ale nadal nie można uzyskać algorytm kliknąć w głowie

var hanoi = function (disc, src, aux, dst) { 

    if (disc > 0) { 
    hanoi(disc - 1, src, dst, aux); 
    document.write('Move disc ' + disc + ' from ' + src + ' to ' + dst); 
    hanoi(disc - 1, aux, src, dst); 
    } 
} 

hanoi(3, 'Src', 'Aux', 'Dst'); 

W jaki sposób document.write (...), kiedykolwiek uruchomiono. My Logic Po raz pierwszy uruchamiamy dysk funkcji> 3. Następnie rekursywnie wywołujemy funkcję ponownie omijając wszystko poniżej, więc w jaki sposób document.write ma szansę uruchomić?

Rozumiem rekurencję (wykonałem podstawowe przykłady), ale nadal nie mogę zobaczyć, jak uzyskać dane wyjściowe. Jeśli istnieje sposób, w jaki mogę go uruchomić wizualnie i zobaczyć w akcji, to mogłoby pomóc.

Answer 1

Można pomyśleć, co będzie jak drzewo połączeń (czas porusza się od góry do dołu):

hanoi(3, ...) => 
|-> hanoi(2, ...) => 
| |-> hanoi(1, ...) => 
| | |-> hanoi(0, ...) => 
| | | \-> (does nothing) 
| | |-> document.write(...) 
| | |-> hanoi(0, ...) => 
| | | \-> (does nothing) 
| | <-/ [hanoi(1, ...) finished] 
| |-> document.write(...) 
| |-> hanoi(1, ...) => 
| | |-> hanoi(0, ...) => 
| | | \-> (does nothing) 
| | |-> document.write(...) 
| | |-> hanoi(0, ...) => 
| | | \-> (does nothing) 
| | <-/ [hanoi(1, ...) finished] 
| <-/ [hanoi(2, ...) finished] 
|-> document.write(...) [halfway done!] 
|-> hanoi(2, ...) => 
| \-> [same pattern as the first time, with different data] 
\-> [hanoi(3, ...) finished]