用 requestAnimationFrame 写动画发现有些问题想请教一下各位

[cheroky]

主要就是想再 rAF 之后调用其它的函数，开始感觉很简单，但是一写发现不会。。 最刚开始的想法 callback 放在 rAF 的结束条件中发现会死循环。 我想着按照回调队列，能不能让一个函数始终在队列末尾，然后我现在解决办法是动画完了进入结束条件之后会改变一个状态变量然后 return，然后写一个判断函数放入 setTimeout()，判断函数如下：

engageToWhere(shelf,cb) {
        this.animate_state = "ANIMATE";
        //...
        this._animation(targetY,diff>=0?0:1); //动画
        function checkIfIdle() {
            if (self.animate_state==='ANIMATE') {
                setTimeout(checkIfIdle,0);
            } else {
                cb();
            }
        }
        checkIfIdle();
        
    }

虽然功能是实现了，但是觉得实现方法有待商榷，百度了很久也没有说关于这个的事情，只在 stackoverflow 看到有类似的问题，不知道在实际工作中应该怎么判断动画结束？？

[jamesliu96]

既然 raf 有现有的结束条件，为什么还要 animate_state ？

进入结束条件之后调用回调一次，不执行 raf，怎么会出现死循环？

[cheroky]

@jamesliu96 我也觉得奇怪，可能是我方法有点问题，我把_animation 贴出来

```
_animation(target,direction) {
var top = this.entity.offsetTop;
//console.log(top,target,direction);
if(direction) {
top-=18;
} else {
top++;
}
if((!direction && top>=target) || (direction && top<=target)) {
this.animate_state = "IDLE";
return;
//callback() 在这死循环
}
var bindAnimation = this._animation.bind(this,target,direction);

this.entity.style.top = top+'px';
requestAnimationFrame(bindAnimation);
}
```

[jamesliu96]

@cheroky 是不是 callback() 之后没 return ？

[cheroky]

@jamesliu96 0.0 真的没写 return，试了下可以了！！！但就是不太懂为啥得写 return ？我看 stackoverflow 上也没写 return，误人子弟啊

[jamesliu96]

@cheroky 老哥我就看了一眼，猜到应该是这个原因。不 return 就又调用 raf 了啊。

[cheroky]

@jamesliu96 是我蠢了蠢了。。。多谢多谢

[erlking]

结束条件加 cancelAnimationFrame(bindAnimation); 应该就好了