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

Question

下面的代码抛出“未捕获的RangeError：超出最大调用堆栈”，我不知道为什么。我认为这将是一系列事件：

代码在页面加载

上运行

设置超时回调

调用堆栈在那里结束

5秒后，该函数被称为

再次设置超时回调

并且调用堆栈结束

等

但我获得的控制台输出是：

xi=0
Uncaught RangeError: Maximum call stack size exceeded

代码：

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

感谢您的帮助。

Answer 1

最里面的函数（匿名函数）正在调用自身。您的代码等同于

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

因此，这会导致无休止的递归。

你想要的是：

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

Answer 2

你最好只使用一个命名函数。

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

如果您经常创建间隔（您希望立即运行），也可以创建辅助函数。

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.