Question

以下代码用于显示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>

Answer 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);

Answer 2

<德尔> 使用** setInterval（）**和** Math.round **和** Math.random **？ var time = setInterval（f，2000）; function f（）{ document.getElementById（＆＃34; bit＆＃34;）。innerHTML = Math.round（Math.random（））; }

使用if

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

Answer 3

就像@CertainPerformance所说，应该使用setInterval代替。以下是一些如何使用它的好例子 - https://www.w3schools.com/jsref/met_win_setinterval.asp

Javascript中的无限循环问题

3 个答案: