Question

I guess its to stop browsers getting nailed all the time by duff code but this:

        function print(item) {
            document.getElementById('output').innerHTML = 
               document.getElementById('output').innerHTML
               + item + '<br />';
        }

        function recur(myInt) {
            print(myInt);
            if (int < 10) {
                for (i = 0; i <= 1; i++) {
                    recur(myInt+1);
                }
            }
        }

produces:

0
1
2
3
4
5
6
7
8
9
10
10

and not the big old mess I get when I do:

        function recur(myInt) {
            print(myInt);
            if (int < 10) {
                for (i = 0; i <= 1; i++) {
                    var x = myInt + 1;
                    setTimeout("recur("+x+")");
                }
            }
        }

Am I missing something or is this how you do recursion in JS? I am interested in navigating trees using recursion where you need to call the method for each of the children.

Answer 1

You are using a global variable as loop counter, that’s why it only loops completely for the innermost call. When you return from that call, the counter is already beyond the loop end for all the other loops.

If you make a local variable:

function recur(int) {
    print(int);
    if (int < 10) {
        for (var i = 0; i <= 1; i++) {
            recur(int + 1);
        }
    }
}

The output is the same number of items as when using a timeout. When you use the timeout, the global variable doesn’t cause the same problem, because the recursive calls are queued up and executed later, when you have exited out of the loop.