Question

我想让一个div球使用javascript和向左移动 document.getElementById("ball").style.left = i + "px";

这是我正在使用的代码（如下）。我当时想使用while(true) {}循环，但是它对我造成了崩溃...

有人知道怎么做/解决这个问题吗？

   <script>
        //while(true) {
        var ballLeft = 250;
        document.getElementById("ball").style.left = ballLeft;
        ballLeft =-2;
        //  }

    </script>

编辑

<script>标记位于<body>

内

编辑2

我的问题是球没有移动。

Answer 1

JavaScript是单线程的（有一些非常特殊的例外，不适用于此处）。该单线程一次只能执行一个任务。执行脚本是一项任务。重新绘制浏览器是另一回事。回答点击是另一回事。如果您运行无限任务（例如while (true) { ... }），则浏览器将再也没有时间与您互动。

请确保频繁的超时中断任何无限循环，或者对于动画工作，甚至更好-使用window.requestAnimationFrame()。

const ball = document.getElementById('ball');
let position = 250;

function tick(ts) {
  ball.style.left = `${position}px`;
  position -= 2;
  if (position > 0) window.requestAnimationFrame(tick);
}

window.requestAnimationFrame(tick);

#ball {
  position: absolute;
  left: 250px;
  top: 0;
}

<div id="ball">
  
</div>

为什么这个document.getElementById（）函数不起作用？

1 个答案: