javascript - 如何停止这个移动的div

Question

这是我的 Javascript 函数

    <script type="text/javascript">
    var foo = null; // object
    function doMove() {
      foo.style.left = parseInt(foo.style.left)+1+'px';
      setTimeout(doMove,0); // call doMove in 20msec
      document.getElementById("foo").innerHTML = foo.style.left;
    if(foo.style.left=='100px'){
     alert(foo.style.left);
    }}
    function init() {
      foo = document.getElementById('foo'); // get the "foo" object
      foo.style.left = '0px'; // set its initial position to 0px
      doMove(); // start animating
    }
    window.onload = init;
    </script>
    <div id="foo" style="width:100px;background:#99ccff;position: relative;">I am moving box</div>

Answer 1

检查您是否<div>已达到您需要的终点(例如 100px)，如果是这样，请勿调用 setTimeout()不再起作用:

function doMove() {
  foo.style.left = parseInt(foo.style.left)+1+'px';
  document.getElementById("foo").innerHTML = foo.style.left;
  if(foo.style.left=='100px'){
    alert("Finished");
  } else {
    setTimeout(doMove,20); // call doMove in 20msec
  }
}