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

うーん...これはうまくいきますか？

  function doMove() {
      foo.style.left = parseInt(foo.style.left)+1+'px';
      if (!stop) setTimeout(doMove, 0); // if stop is false then call doMove in 20msec
      document.getElementById("foo").innerHTML = foo.style.left;
    if(foo.style.left=='100px'){
      alert(foo.style.left);
    }
  }

Answer 2

アニメーションをシミュレートするこの方法はお勧めしませんが。

function getLeftPx() {
  console.log(left+"px");
  return left + "px";
}

function init() {
  window.left = 0;

  var foo = document.getElementById('foo'); // get the "foo" object
  foo.style.left = getLeftPx(); // set its initial position to 0px
  doMove(); // start animating
}
window.onload = init;

function doMove() {

  window.moveInterval = setInterval( function() {
    left++;
    foo.style.left = getLeftPx();
    foo.innerHTML = left;

    if( left == 100 ) {
      clearInterval( moveInterval );
    }
  }, 20 );
}

Answer 3

<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
  }
}