为什么 Raphael 的帧速率在这段代码上会变慢？答案

【问题标题】：Why does Raphael's framerate slow down on this code?为什么 Raphael 的帧速率在这段代码上会变慢？
【发布时间】：2010-04-28 22:40:46
【问题描述】：

所以我只是使用 Raphael JS 做一个基本的轨道模拟器，我画一个圆圈作为“星”，另一个圆圈作为“行星”。它似乎工作得很好，一个障碍是随着模拟的继续，它的帧速率逐渐减慢，直到轨道运动不再显得流畅。这是代码（注意：仅使用 jQuery 来初始化页面）：

$(function() {
    var paper = Raphael(document.getElementById('canvas'), 640, 480);
    var star = paper.circle(320, 240, 10);
    var planet = paper.circle(320, 150, 5);
    var starVelocity = [0,0];
    var planetVelocity = [20.42,0];
    var starMass = 3.08e22;
    var planetMass = 3.303e26;
    var gravConstant = 1.034e-18;
    function calculateOrbit() {
        var accx = 0;
        var accy = 0;
        accx = (gravConstant * starMass * ((star.attr('cx') - planet.attr('cx')))) / (Math.pow(circleDistance(), 3));
        accy = (gravConstant * starMass * ((star.attr('cy') - planet.attr('cy')))) / (Math.pow(circleDistance(), 3));
        planetVelocity[0] += accx;
        planetVelocity[1] += accy;
        planet.animate({cx: planet.attr('cx') + planetVelocity[0], cy: planet.attr('cy') + planetVelocity[1]}, 150, calculateOrbit);
        paper.circle(planet.attr('cx'), planet.attr('cy'), 1); // added to 'trace' orbit
    }
    function circleDistance() {
        return (Math.sqrt(Math.pow(star.attr('cx') - planet.attr('cx'), 2) + Math.pow(star.attr('cy') - planet.attr('cy'), 2)));
    }
    calculateOrbit();
});

无论如何，在我看来，该代码的任何部分都不会导致动画逐渐减慢到爬行，因此任何解决问题的帮助将不胜感激！

【问题讨论】：

我回答这个问题是为了寻找答案，为什么我的小 raphael 小部件在我没有真正改变任何东西的情况下变得非常缓慢。我只插入 jQuery 并使用 jQuery 选择器而不是 document.getElementById() 调用来访问各个小部件部分。在我看来，jQuery 与 Raphael 结合使用会严重降低速度。
您现在可以使用 Raphael 中添加的 'eve' 对象来改进这一点，然后您可以每帧获得更新，并在那里进行计算，所以我会让 planet.animate 与另一个调用一次进行计算的函数。

标签： raphael

【解决方案1】：

问题在于在您的 planet.animate() 调用中对 calculateOrbit 的回调。它没有被 raphael 正确处理，导致内存泄漏或执行速度变慢。如果您将其删除并替换该行

calculateOrbit()

与

setInterval(calculateOrbit, 150);

它应该运行顺利。

完整代码：

$(function() {
var paper = Raphael(document.getElementById('canvas'), 640, 480);
var star = paper.circle(320, 240, 10);
var planet = paper.circle(320, 150, 5);
var starVelocity = [0,0];
var planetVelocity = [20.42,0];
var starMass = 3.08e22;
var planetMass = 3.303e26;
var gravConstant = 1.034e-18;
function calculateOrbit() {
    var accx = 0;
    var accy = 0;
    accx = (gravConstant * starMass * ((star.attr('cx') - planet.attr('cx')))) / (Math.pow(circleDistance(), 3));
    accy = (gravConstant * starMass * ((star.attr('cy') - planet.attr('cy')))) / (Math.pow(circleDistance(), 3));
    planetVelocity[0] += accx;
    planetVelocity[1] += accy;
    planet.animate({cx: planet.attr('cx') + planetVelocity[0], cy: planet.attr('cy') + planetVelocity[1]}, 150);
    paper.circle(planet.attr('cx'), planet.attr('cy'), 1); // added to 'trace' orbit
}
function circleDistance() {
    return (Math.sqrt(Math.pow(star.attr('cx') - planet.attr('cx'), 2) + Math.pow(star.attr('cy') - planet.attr('cy'), 2)));
}
setInterval(calculateOrbit, 150);
});

【讨论】：

我遇到了类似的问题，想尝试这个解决方案。请问，您调用 setInterval 的 150 毫秒是从哪里来的？