Question

我不明白为什么无限循环不起作用但是取消注释函数调用有效。

<body>
<canvas id="myCanvas"style="border:2px solid black;" width="1600" height="900">
    Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
    var c = document.getElementById ("myCanvas").getContext ("2d");
    var boxSize = 25;
    var numBoxes = 1;
    var x = 1000;
    var dx = 1;
    var y = 100;
    var dy = 1;
    var a = 0.01;
    var da = 0.1;
    var size = 20;
    var w = c.canvas.width;
    var h = c.canvas.height;

    //function testing () {
    while (true) {
        c.clearRect (0, 0, w, h);
        x = x + 1;
        y = y + 1;
        a = a + 0.1;
        x = x + dx;
        y = y + dy;
        if (x < size / 2 || x + (size / 2) > w) {
            dx = -dx;
            da = -da;
        }
        if (y < size / 2 || y + (size / 2) > h) {
            dy = -dy;
            da = -da;
        }
        c.save ();
        c.translate (x, y);
        c.rotate (a);
        c.strokeRect (-size / 2, -size / 2, size, size);
        c.restore ();
    }

    // testing ();
    // setInterval (testing, 10);
</script>
</body>

Answer 1

当您使用setInterval时，您会继续将要调用的函数添加到浏览器要执行的事务队列中。重绘事件也会添加到此队列中。

当你使用无限循环时，浏览器永远不会到达函数的末尾，因此它永远无法运行重绘，并且文档中的图像永远不会更新。

Answer 2

JavaScript-in-a-browser是大型构造的一部分。你需要符合这种结构的规则，不要伤害它。其中一条规则是您的JavaScript 必须快速运行，然后退出。退出意味着控制权返回到框架，框架完成所有工作，重新绘制屏幕等。

尝试多次隐藏和展示：

for (n = 0; n < 200; n++) {
  $("#test").hide();
  $("#test").show();
}

当此代码运行时，您将看不到任何闪烁，您将看到最后一个命令将起作用。

不得不说，以这种方式组织代码并不容易，如果你想制作一个在画布上绘制漂亮动画的循环，你必须在没有的情况下进行。

Javascript setInterval有效，但不是无限循环

2 个答案: