复选框导致无限循环答案

【问题标题】：Checkbox causes infinite loop复选框导致无限循环
【发布时间】：2017-02-26 19:48:37
【问题描述】：

所以我正在使用 html en Javascript 制作一个程序，用户可以在其中单击一个按钮，程序将执行计算和一个复选框，选中后将在循环中执行相同的计算。

  <body>
  <button onclick="javascript:calc();"> Calculate</button>
  <form action="">
   <input id="checkbox" type='checkbox' name='auto' value='Auto' /> 
  </form>

   <script>
    var checkbox = document.getElementById('checkbox');
   function calc() {
     do{
    //Calculate stuff
     }while(checkbox.checked);
    }
   </script>

   </body>

问题是，当我选中复选框时，网页会冻结，因为它陷入了无限循环，所以我无法取消选中复选框来停止它。

有没有办法阻止它进入无限循环？

【问题讨论】：

是的，有一种方法，叫做event listening。

标签： javascript html loops checkbox

【解决方案1】：

选中复选框的那一刻，您将代码置于无限循环中。这将冻结页面并且不允许用户取消选中该框。你可以试试这样的 setTimeout。

const foo = () => {
  if (checkbox.checked) {
    //do math
    setTimeout( () => {
      foo();
    }, 3000)
  }
}

设置当复选框被点击时触发该函数，如果被选中，你可以进行计算，它会在3秒后再次递归调用自己，并检查复选框是否仍然被选中。

【讨论】：

【解决方案2】：

function calc(){
if(conditionIsTrue){ // do smth here}
else{
//do another stuff here
}
}

【讨论】：

【解决方案3】：

有办法：不写死循环？您在选中复选框时一遍又一遍地执行// calculate stuff 部分（除非您在其中有break），并且由于它在ui 线程上运行，因此ui 被冻结。

【讨论】：