为什么这种关闭会使浏览器崩溃？

Question

我正在写一个看起来像这样的闭包：

(function(){

   var OutterScope = 1;

   (function RunThisLoop() {

      OutterScope++;
      console.log(OutterScope);

      setInterval(RunThisLoop, 1000);

   })();

})();

这里是的jsfiddle 。 问题在于控制台输出似乎关闭了：应该每秒更新一次，但似乎每秒更新一次以上，然后最终导致浏览器崩溃。 这是为什么？

Answer 1

调用RunThisLoop并一次又一次地设置时间间隔可能会耗尽资源...

您可能需要setTimeout或将setInterval移到RunThisLoop之外。

Answer 2

每次运行该功能时，都会添加更多的计划间隔计时器。 最终，他们滚雪球并消耗了所有CPU资源。

这是修复它的最佳方法（几乎没有没有clearInterval()就可以使用setInterval()方案）：

(function(){

   var OuterScope = 1;
   var myInterval = setInterval(RunThisLoop, 1000);

   function RunThisLoop() {

      OuterScope++;
      console.log(OuterScope);
      //stop clause 
      if (OuterScope > 10) clearInterval(myInterval);    
   };

})();​

Answer 3

当您运行RunThisLoop（）时，将创建一个包含其本地状态的上下文。
然后，对RunThisLoop（）的递归调用将为新实例的本地状态创建一个新的上下文。
然后，对RunThisLoop（）的递归调用将为新实例的本地状态创建一个新的上下文。
然后，对RunThisLoop（）的递归调用将为新实例的本地状态创建一个新的上下文。
然后，对RunThisLoop（）的递归调用将为新实例的本地状态创建一个新的上下文。
然后，对RunThisLoop（）的递归调用将为新实例的本地状态创建一个新的上下文。
然后，对RunThisLoop（）的递归调用将为新实例的本地状态创建一个新的上下文。
然后，对RunThisLoop（）的递归调用将为新实例的本地状态创建一个新的上下文。
然后，对RunThisLoop（）的递归调用将为新实例的本地状态创建一个新的上下文。
然后，对RunThisLoop（）的递归调用将为新实例的本地状态创建一个新的上下文。
然后，对RunThisLoop（）的递归调用将为新实例的本地状态创建一个新的上下文。
然后，对RunThisLoop（）的递归调用将为新实例的本地状态创建一个新的上下文。
糟糕！ 堆栈溢出！

Answer 4

已经回答了，这只是一个澄清：

通过使用setInterval您可以计划一组新的循环，并且由于您在循环内执行该循环，因此它呈指数增长：每秒钟您将调用次数加倍：

1. 1
2. 2
3. 4
4. 8
5. 16
6. 32
7. 64
8. 128
9. 256
10. 512
11. 1 024
12. 2048
13. 4096
14. 8192
15. 16384
16. 32768
17. 65536
18. 131072
19. 262144
20. 524288
21. 1,048576
22. 2097152
23. 4194304
24. 8388608
25. 16777216
26. 33554432
27. 67108864
28. 134217728
29. 268435456
30. 536870912
31. 1073741824
32. 2147483648