javascript - jquery animate 即使条件不满足也执行

Question

正如有人在 my previous question 中建议我的那样，我正在使用 jquery 来移动 div。
现在我希望它在距离左边距达到 200 像素时停止。
为此，我使用了以下代码:

  var timeout = 100;
  var width = 200;
  var height = 500;
  var howmuch = 0;
  function move(before) {
	howmuch = before + 5;
	$("#obj").animate({'marginLeft' : '+=' + howmuch + 'px' } );
	if(howmuch < width){
	    setTimeout(function() {
		move(howmuch)
		}, timeout);
		}
	else{alert('finished');
	}
  }
  setTimeout(function() {
	move(howmuch)
  }, timeout);

  #obj {
  background-color: red;
  width: 100px;
  height: 100px;
  margin-left: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div id="obj"></div>

但这不起作用:当框达到 200 像素时我会收到警报，但它不会停止。
可能是什么问题？

Answer 1

问题是 jQuery 的 animate() 需要一定的时间才能完成，并且您不允许一个动画在开始另一个动画之前完成。您还增加了 margin 增加额。您不是增加 5 像素，而是增加之前的 margin 量和额外的 5 像素。要完成您正在尝试做的事情(循环中的多个动画)，您需要分配一个回调。在这里 fiddle :http://jsfiddle.net/o5d6z7qL/1/

var timeout = 100;
var width = 200;
var height = 500;
var howmuch = 0;
function move(before) {
    howmuch = before + 5;
    $("#obj").animate({ 'marginLeft': '+=5px' }, function () {
        if (howmuch < width) {
            setTimeout(function () {
                move(howmuch)
            }, timeout);
        }
        else {
            alert('finished');
        }
    });


}
setTimeout(function () {
    move(howmuch)
}, timeout);