Javascript中的无限循环问题

下面的代码旨在显示一个0，几秒钟后将其更改为1，然后返回到0，依此类推

问题是这（显然）冻结了网页本身。我可以使用动画gif，但我想进一步扩展它，代码成为更好的选择

我该怎么做

<div id="bit" style="width: 100px; height: 100px; margin: auto; border: 1px solid #000; text-align: center;"></div>
<script>
    var bitValue = 0;
    for (;;) {
        setTimeout(showBit(), 2000);
    }

    function showBit() {
        document.getElementById("bit").innerHTML = bitValue;
        bitValue = Math.abs(bitValue - 1);
    }
</script>

var比特值=0；
对于（；；）{
setTimeout（showBit（），2000）；
}
函数showBit（）{
document.getElementById（“bit”）.innerHTML=bitValue；
bitValue=Math.abs（bitValue-1）；
}

有几件事出了问题：

 setTimeout(showBit(), 1000);

必须是：

setTimeout(showBit, 100);

因为您希望传递函数，而不是立即执行它。另一件事是，你不能只是这样做

 for(;;) { /*...*/ }

因为这会永远阻挡浏览器。您必须异步执行此操作：

  const delay = ms => new Promise(res => setTimeout(res, ms));

 (async function() {
   while(true) {
      await delay(1000);
      showBit();
   }
 })();

或者更简单一点，使用伪递归超时：

(function next() {
   showBit();
   setTimeout(next, 1000);
 })();

或者，如果不想手动执行此操作，只需使用setInterval：

 setInterval(showBit, 1000);

是否将**setInterval（）**与**Math.round**和**Math.random**一起使用？ var时间=设定间隔（f，2000）； 函数f（）{ document.getElementById（“bit”）.innerHTML=Math.round（Math.random（））； } 如果使用

var time = setInterval(function() {
    if (document.getElementById("bit").innerHTML == 0) {
        document.getElementById("bit").innerHTML = 1;
    }
    else {
        document.getElementById("bit").innerHTML = 0;
    }
}, 2000);

---

就像@CertainPerformance所说的那样，应该使用

setInterval

。这里有几个很好的例子说明如何使用它-

for（；）{

将永远阻塞。请改用

setInterval

。

setTimeout（showBit（），2000）；

相当于

var tmp=showBit（）；setTimeout（tmp，2000）；

。因为

showBit（）

返回

未定义

，您的

设置超时

调用无效（您传递的是

未定义

而不是函数）。谢谢。我使用了CertainPerformance的响应，并使其全部正常工作！：）因为这只是以1然后0的形式运行，所以random没有意义…但是！这对于下一步来说是完美的。谢谢。

Math。random

不带任何参数。我错过了第一点。我知道发送（异步运行）但是你的代码让它更清晰；谢谢。很高兴能帮上忙：）这个答案是“在另一座城堡里”。找到这个帖子的访问者应该能够理解你的答案，而无需访问外部网站（那时可能是离线的）。另外，请不要推荐w3schools，因为它们过于简单化了，我宁愿推荐MDN。这是你的观点。我确实提到了给出正确答案的人。如果你只需要查找一些小的内容，w3schools是一个很好的参考。我同意MDN很好。但在这里，w3schools很好地解释了它的用法。