Question

所以我正在使用html和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>

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

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

Answer 1

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

Answer 2

有一种方法：不写无限循环？您正在检查复选框时反复执行// calculate stuff部分（除非您有break），并且由于它在ui线程上运行，因此ui被冻结。

Answer 3

当您选中复选框时，您将把代码置于无限循环中。这将冻结页面，不允许用户取消选中该框。您可以尝试使用setTimeout之类的东西。

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

单击复选框时将功能设置为触发，如果选中，则可以进行计算，并在3秒后递归调用自身并检查复选框是否仍然处于检查状态。

复选框导致无限循环

3 个答案: