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

Question

下面的代码抛出了一个"Uncaught 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++);
});

这是jsfiddle可以试试。