Torre di Hanoi - JavaScript - le parti buone

Question

ho visto le altre domande sul SO sulla funzione ricorsiva e ho letto le risposte, ma non riesco ancora a ottenere l'algoritmo di cliccare nella mia testa

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'); 

Come funziona document.write (...), mai eseguito. La mia logica è la prima volta che eseguiamo il disco della funzione è> 3. quindi chiamiamo ricorsivamente la funzione saltando di nuovo tutto quanto segue, in che modo document.write può funzionare?

Capisco la ricorsione (fatto gli esempi di base) ma non riesco ancora a vedere come si ottiene un risultato. Se c'è un modo in cui posso eseguirlo visivamente e vederlo in azione, ciò aiuterebbe molto.

Answer 1

Si può pensare a ciò che accadrà come un albero di chiamata (il tempo si muove dall'alto verso il basso):

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]