命名空间Javascript中的递归函数

Question

I have a site that I've namespaced ( NS.something.functionA() , etc) for sake of organization. I want to have a recursive function within this namespaced Javascript, but when the function tries to call itself, I get an undefined is not a function error.

http://jsfiddle.net/fmpeyton/Jwz6g/

var timeoutInt = 2000;
var NS = {};
var resultsElement = document.getElementById('results');

NS.recur1 = (function(){
    setTimeout(function(){
        NS.recur1();
        resultsElement.innerHTML += 'recur1 re-occuring!<br/>';
    }, timeoutInt);
})();

(function recur2(){
    setTimeout(function(){
        recur2();
        resultsElement.innerHTML += 'recur2 re-occuring!<br/>';
    }, timeoutInt);
})();

NS.recur3 = (function(){
    (function realRecur3(){
        setTimeout(function(){
            realRecur3();
            resultsElement.innerHTML += 'recur3 re-occuring!<br/>';
        }, timeoutInt);
    })()
})();

recur1() is the function I am having a problem with. recur2() is how I've seen recursion work before in JS. recur3() was an idea I was playing around with (not ideal, but definitely a solution).

Is there any way to make the recursive function recur1() work?

Answer 1

(function recur1(){
    setTimeout(function(){
        recur1();
        resultsElement.innerHTML += 'recur1 re-occuring!<br/>';
    }, timeoutInt);
})();

will do it.

You can name function expressions, and when you do, the name is bound to the result of the function expression in the function's body.

The language spec explains

The production FunctionExpression : function Identifier ( FormalParameterList _opt ) { FunctionBody } is evaluated as follows:

...

Call the CreateImmutableBinding(N) concrete method of envRec passing the String value of Identifier as the argument.

Answer 2

NS.recur1 = (function(){
  setTimeout(function(){
    NS.recur1();
    resultsElement.innerHTML += 'recur1 re-occuring!<br/>';
  }, timeoutInt);
})(); // << This () invokes the function you just wrapped

So NS.recur1 is not a "function", but the return of that invocation.

So when you call NS.recur1() , you are calling recur1() against undefined , since the invocation doesn't return anything.

Simple alternative would be to not invoke at assignment, but at some later point

NS.recur1 = function(){
  setTimeout(function(){
    NS.recur1();
    resultsElement.innerHTML += 'recur1 re-occuring!<br/>';
  }, timeoutInt);
};

NS.recur1(); // begin recursion

Answer 3

First recur1 is not a function, it's a closure, function and closure (function that executes himself wrapping some internal logic) are different things and you are messing them both.

I think that what you want is to declare the functions, and then, call one of them, to trigger a cyclic recursion timed by a flag called timeoutInt, so you are kind of creating code flows that update something with timeoutInt milliseconds.

 var timeoutInt = 2000;
 var NS = {};
 var resultsElement = document.getElementById('results');

 NS.recur1 = function(){
     setTimeout(function(){
         NS.recur1();
         resultsElement.innerHTML += 'recur1 re-occuring!<br/>';
     }, timeoutInt);
 };

 NS.recur2 = function(){
     setTimeout(function(){
         NS.recur2();
         resultsElement.innerHTML += 'recur2 re-occuring!<br/>';
     }, timeoutInt);
 };

 NS.recur3 = function(){
     setTimeout(function(){
         NS.recur3();
         resultsElement.innerHTML += 'recur3 re-occuring!<br/>';
     }, timeoutInt);
 };

Use the code above and start from this point.

Here is a further push to help you out: http://jsfiddle.net/Jwz6g/1/ (working example)