我在尝试为某个元素设置动画时遇到问题。我有一个递归函数 animate,其中包含 setTimeout 来延迟动画。问题是调用递归方法后的下一行在调用动画之前运行。例如使用以下代码:
this.slideTo = function(x,y) {
var originalStyle = this.element.style.cssText;
var endX = x;
var endY = y;
var pos = this.getPosition();
var startX = pos.x;
var startY = pos.y;
var distX = x - pos.x;
var distY = y - pos.y;
var totalDistance = Math.sqrt((distX*distX) + (distY*distY));
var count = 0;
var done = false;
animate(this.element);
function animate(element) {
count += 5;
var curPos = _(element).getPosition();
var curDistX = endX - curPos.x;
var curDistY = endY - curPos.y;
var curDistance = Math.sqrt((curDistX*curDistX) + (curDistY*curDistY));
var percentDone = count/totalDistance;
var moveToX = Math.round((percentDone*distX) + startX);
var moveToY = Math.round((percentDone*distY) + startY);
_(element).moveTo(moveToX,moveToY);
if(percentDone <= 1) {
setTimeout(function(){animate(element);},1);
} else {
done = true;
}
}
console.log(done);
this.element.style.cssText = originalStyle;
}
控制台显示 false,因为它是在动画完成之前运行的。我该如何解决这个问题?顺便说一句:这是在鼠标事件上调用的。这可能有什么关系吗?
最佳答案
它不起作用,因为 JS,特别是 setTimeout
,是异步的——也就是说,它不会阻塞( sleep /等待/等)。您基本上是设置超时,然后继续执行其余代码。当时间过去并且它不做任何其他事情时,JS 会调用您的函数。
大多数时候,您可以通过传入动画完成时调用的回调来解决此问题(而不是设置 done
或同时设置 done
,这是最简单的方法) .
关于JavaScript动画: Why does the next line run before the animation is done?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7670572/