javascript - 为什么这个关闭会使浏览器崩溃？

Question

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

(function(){

   var OutterScope = 1;

   (function RunThisLoop() {

      OutterScope++;
      console.log(OutterScope);

      setInterval(RunThisLoop, 1000);

   })();

})();

<strong>这里是jsfiddle。问题是控制台输出似乎关闭：它应该每秒更新一次，但它似乎每秒更新超过一秒，然后最终导致浏览器崩溃。这是为什么？

score 2 · Accepted Answer

RunThisLoop可能由于一次又一次地调用和设置间隔而耗尽资源......

您可能想要setTimeout改为或setInterval移动RunThisLoop.

score 2 · Accepted Answer

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

这是修复它的最佳方法（几乎没有setInterval()可以在没有的情况下使用的场景clearInterval()）：

(function(){

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

   function RunThisLoop() {

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

})();

score 1 · Accepted Answer

当您运行 RunThisLoop() 时，会创建一个上下文以包含其本地状态。
然后递归调用 RunThisLoop() 为新实例的本地状态创建一个新上下文。
然后递归调用 RunThisLoop() 为新实例的本地状态创建一个新上下文。
然后递归调用 RunThisLoop() 为新实例的本地状态创建一个新上下文。
然后递归调用 RunThisLoop() 为新实例的本地状态创建一个新上下文。
然后递归调用 RunThisLoop() 为新实例的本地状态创建一个新上下文。
然后递归调用 RunThisLoop() 为新实例的本地状态创建一个新上下文。
然后递归调用 RunThisLoop() 为新实例的本地状态创建一个新上下文。
然后递归调用 RunThisLoop() 为新实例的本地状态创建一个新上下文。
然后递归调用 RunThisLoop() 为新实例的本地状态创建一个新上下文。
然后递归调用 RunThisLoop() 为新实例的本地状态创建一个新上下文。
然后递归调用 RunThisLoop() 为新实例的本地状态创建一个新上下文。
……哎呀！堆栈溢出！

score 0 · Accepted Answer

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

通过使用setInterval您安排一组新的循环，并且由于您在循环内执行此操作，它会呈指数增长：每秒钟您的调用次数就会增加一倍：

1
2
4
8
16
32
64
128
256
512
1 024
2 048
4 096
8 192
16 384
32 768
65 536
131 072
262 144
524 288
1 048 576
2 097 152
4 194 304
8 388 608
16 777 216
33 554 432
67 108 864
134 217 728
268 435 456
536 870 912
1 073 741 824
2 147 483 648

javascript - 为什么这个关闭会使浏览器崩溃？

4 回答 4

Related

Reference