JavaScript动画: Why does the next line run before the animation is done?

Question

我在尝试为某个元素设置动画时遇到问题。我有一个递归函数 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，因为它是在动画完成之前运行的。我该如何解决这个问题？顺便说一句:这是在鼠标事件上调用的。这可能有什么关系吗？

Answer 1

它不起作用，因为 JS，特别是 setTimeout，是异步的——也就是说，它不会阻塞( sleep /等待/等)。您基本上是设置超时，然后继续执行其余代码。当时间过去并且它不做任何其他事情时，JS 会调用您的函数。

大多数时候，您可以通过传入动画完成时调用的回调来解决此问题(而不是设置 done 或同时设置 done，这是最简单的方法) .