javascript - Javascript 中无限循环休眠

标签 javascript html

我有一个程序应该永远每半秒随机改变表格中十字的位置,但我找不到一种方法让程序等待半秒而不挂起。

以下是我的代码,其中sleep(0.5)应该换成不同的东西:

<!DOCTYPE html>
<html>
<body>
    <table>
        <tr>
            <td id="0x0">X</td>
            <td id="1x0">X</td>
            <td id="2x0">X</td>
        </tr>
        <tr>
            <td id="0x1">X</td>
            <td id="1x1">X</td>
            <td id="2x1">X</td>
        </tr>
        <tr>
            <td id="0x2">X</td>
            <td id="1x2">X</td>
            <td id="2x2">X</td>
        </tr>
    </table>
    <script>
        for(;;) {
            var x = Math.floor(Math.random()*2);
            var y = Math.floor(Math.random()*2);

            id = x.toString() + "x" + y.toString();         
            document.getElementById(id).innerHTML = "O";               
            sleep(0.5);
            document.getElementById(id).innerHTML = "X";
        }
    </script>
</body>
</html>

最佳答案

Javascript 没有名为 sleep 的函数,但您可以使用 setTiemout 在给定时间间隔后执行函数。

我还建议您使用 setInterval 而不是无限 for 循环来在指定的时间间隔后执行命令集。

另一件事是,您在随机值上使用 floor,该值始终为 01 并且它会永远不会2。使用 Math.round 将值四舍五入到最接近的数字。因此它将选择所有值。

setInterval(function() {
  var x = Math.round(Math.random() * 2);
  var y = Math.round(Math.random() * 2);

  id = x.toString() + "x" + y.toString();
  document.getElementById(id).innerHTML = "O";

  setTimeout(function() {
    document.getElementById(id).innerHTML = "X";
  }, 500);
}, 100);
<table>
  <tr>
    <td id="0x0">X</td>
    <td id="1x0">X</td>
    <td id="2x0">X</td>
  </tr>
  <tr>
    <td id="0x1">X</td>
    <td id="1x1">X</td>
    <td id="2x1">X</td>
  </tr>
  <tr>
    <td id="0x2">X</td>
    <td id="1x2">X</td>
    <td id="2x2">X</td>
  </tr>
</table>

关于javascript - Javascript 中无限循环休眠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32718493/

相关文章:

javascript - 是否可以将 Canvas ID 的宽度和高度属性设置为窗口大小的 90%?

javascript - "triple not equal"运算符是什么以及如何输入它?

javascript - image.onload 返回不是我想要的

javascript - 在 JavaScript 中反转字符串以查找回文

javascript - 使用 jQuery 通过多维数组向 `<option>` 提供 `<datalist>` 元素

jquery - 同位素按大小对图像进行排序?

javascript - 创建具有左侧菜单和右侧内容的简单网站

javascript - 使 jQuery 动画 Div 的大小变得更大

jquery - 如何使用 jquery 检索原始图像的长度和高度?

html - CSS 响应式左右浮动(更改哪个 div 位于顶部)?