为什么使用JavaScript arguments.callee会导致RangeError

Question

The code below throws an "Uncaught RangeError: Maximum call stack exceeded", and I'm not sure why. I thought that this would be the series of events:

the code runs on page load

the timeout callback is set up

the call stack ends there

after 5 seconds, the function is called

the timeout callback is set up again

and the call stack ends

etc.

But the console output I get is:

xi=0
Uncaught RangeError: Maximum call stack size exceeded

the code:

<script>
    var xi = 0;
    (function(){
        window.console && console.log("xi=" +xi++);
        setTimeout(function(){
            arguments.callee();
        }, 5000);
    })();
</script>

Thank you for any help.

Answer 1

The innermost function (anonymous function) is calling itself. Your code is equivalent to

        setTimeout(function f(){
            f();
        }, 5000);

So this results in an endless recursion.

What you want is:

var xi = 0;
(function(){
    window.console && console.log("xi=" +xi++);
    var f = arguments.callee;
    setTimeout(function(){
        f();
    }, 5000);
})();

Answer 2

You're better off just using a named function.

var xi = 0;
(function namedFunction (){
    window.console && console.log("xi=" +xi++);
    setTimeout(function(){
      namedFunction();
    }, 5000);
})();

You could also create a helper function if you create intervals (that you want to run immediately) often.

var xi = 0;

function newInterval (duration, callback) {
    if (typeof callback !== 'function') return console.error('newInterval() requires a function');
    callback();
    return setInterval(callback, duration);
}

var intervalID = newInterval(5000, function () {
    console.log('xi=' + xi++);
});

Here's the jsfiddle to try it.