Simple raphael.js animation which uses “animation.repeat” eats 100% cpu

问题

Check this Code

window.onload = function(){
var paper = Raphael(0,0,1000,1000);

var path1 = "M67,100 C67,180 200,180 200,100 C190,095 177,095 167,100 C157,105 143,105 133,100 C123,095 110,095 100,100 C90,105 77,105 67,100z";    
var path2 = "M67,100 C67,180 200,180 200,100 C190,105 177,105 167,100 C157,095 143,095 133,100 C123,105 110,105 100,100 C90,095 77,095 67,100z";  
var bowl = paper.path(path1).attr({"fill":"black"});

var anim = Raphael.animation({
"50%" : {path:path2},
"100%" : {path:path1}
},1000);

bowl.animate(anim.repeat(Infinity));  
};

After letting it run for a while the CPU usage climbs up to 100%. Can anyone explain why? How can I avoid this?

回答1:

I solved the problem by making two functions and using callbacks to call each other , thus creating an infinite loop.

I suppose anim.repeat(Infinity) was going on creating many copies of the animations, thus slowing down the CPU.

来源：https://stackoverflow.com/questions/16925541/simple-raphael-js-animation-which-uses-animation-repeat-eats-100-cpu