爲什麼拉斐爾的幀率在這段代碼上變慢了？

Question

所以我只是在做一個使用拉斐爾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(); 
}); 

它不會出現，我反正，那該代碼的任何部分會導致動畫逐漸減速到爬行，所以任何幫助解決問題將不勝感激！

Answer 1

問題在於回調您的planet.animate（）調用中的calculateOrbit。它沒有正確處理raphael並導致內存泄漏或執行速度減慢。如果你有

setInterval(calculateOrbit, 150); 

將其刪除並替換線

calculateOrbit() 

應該平穩運行。

全碼：

$(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); 
});