Javascript 使用AnimationFrame制作动画如此缓慢的原因是什么？

我正在学习Javascript和画布动画。试图用动画来提升我的技能，这次是简单的吃角子老虎机

如果有人能解释一下为什么这台“机器”这么慢，那就太好了？我做错了什么

我正在尝试使用requestAnimationFrame而不是SetInterval

最后，对于某些人来说，我的代码可能很糟糕，但请记住，我只是在学习：）

function main（）{//这是主函数
canvas=document.createElement（'canvas'）；
画布宽度=宽度；
canvas.height=高度；
ctx=canvas.getContext（'2d'）；
document.body.appendChild（画布）；
init（）；
canvas.addEventListener（'click'，function（）{
//更新（）；
//window.requestAnimationFrame（更新）；
//设置间隔（更新，100）；
更新（）；
});
};
main（）；
功能imgLoad（imgArray）{
var图像=[]；
imgaray.forEach（函数（链接）{
img=新图像（）；
img.src=链接；
图像推送（img）；
});
返回图像；
};
函数卷（x，y）{//这是我用drawImage方法构造的构造函数
var_this=这个；
_这个.x=x；
_这个。y=y；
_这个.vel=5；
_这个计数器=20；
this.changeY=函数（）{
_this.y+=\u this.vel；
};
this.draw=function（）{//此函数使用图像绘制行
imgLoad（imgaray）；
img.addEventListener（'load'，function（）{
对于（变量i=0；i0）{
window.requestAnimationFrame（更新）；
}
否则{
window.cancelAnimationFrame（更新）；
卷轴[0]。计数器=20；
}
};

我已经将您的代码压缩了一点，下面是我看到的：

function update(){
    for(var i = 0; i < 5; i+=1){
        //calculate stuff
        //draw stuff
        window.requestAnimationFrame(update);
    }
}

---

“慢”是非常模糊的，你能提供一个有效的例子吗？@DarthJS我建议你花点时间阅读这个，我用过它，在动画方面没有问题。@vitr是的，我知道。我试过把它放到JSFIDLE中，但它不起作用，我已经解决了，但无论如何，非常感谢你的例子和建议，我会记住的。谢谢

function update(){
    for(var i = 0; i < 5; i+=1){
        //calculate stuff
        //draw stuff
        window.requestAnimationFrame(update);
    }
}

function myDrawFunction() {
    //Draw stuff here
    requestAnimationFrame(draw);
}

function myUpdateFunction () {
    //Here we will be more strict about when stuff are being updated.
    //i.e. here we care about the elapsed time since last update
}