2015-03-03 102 views
0

使用raphael.js將圖形渲染爲畫布,但問題是存在內存泄漏並且頁面在一段時間後崩潰。有人能幫我解決這個問題嗎?我正在使用underscore.js來處理循環,同時消除仍然沒有運氣。我試圖將庫更改爲svg.js但問題更糟。在此先感謝,代碼如下:使用raphael.js重新渲染時發生內存泄漏

var paper = new Raphael(document.getElementById('visualizerContainer'), 545, 545); 
paper.canvas.style.backgroundColor = '#000'; 
Raphael.fn.line = function(startX, startY, endX, endY){ 
    return this.path('M' + startX + ' ' + startY + ' L' + endX + ' ' + endY); 
}; 
var flag=0; 
window.particleObject={ 
    "id":"", 
    "obj":[] 
} 
function addParticles(){ 
    if(flag) removeParticles(particleObject); 
for(var i=0;i<5000;i++){ 

    var x=Math.floor((Math.random() * 628) + 1); 
    var y=Math.floor((Math.random() * 571) + 1); 
    var circleName = "var circle"+i; 
    circleName = paper.circle(x, y, 1); 
    //var fillColor='#'+ ('000000' + (Math.random()*0xFFFFFF<<0).toString(16)).slice(-6); 
    circleName.attr("fill", "#0F0"); 
    circleName.attr("stroke", "#ff"); 
    particleObject.id=i; 
    particleObject.obj.push(circleName); 

} 
    flag=1; 
} 
function removeParticles(particleObject){ 

    _.map(particleObject.obj, function(o) {o.remove(); }); 
} 
$.getJSON('assets/data/jp_Wall.json', function(data) { 
    $.each(data.features, function(id, obj) { 
     var wall = paper.line(obj.x1, obj.y1, obj.x2, obj.y2).attr({stroke:'red',fill:'red',"stroke-width": 3}); 
    }); 
}); 
$.getJSON('assets/data/jp_ImpossibleSpace.json', function(data) { 
    $.each(data.features, function(id, obj) { 
     var width=(obj.x2-obj.x1); 
     var height=(obj.y2-obj.y1); 
     var top_left_x=obj.x1; 
     var top_left_y=obj.y1; 
     var rectangle = paper.rect(top_left_x, top_left_y, width, height).attr({stroke:'blue',"stroke-width": 3, "stroke-dasharray": "."}); 
    }); 
}); 
addParticles(); 
setInterval(addParticles, 500); 

Wall.json - >https://jsonblob.com/54f47ff7e4b0ae1ed0b1fcf2

jp_ImpossibleSpace.json - >https://jsonblob.com/54f48114e4b0ae1ed0b1fd04

+0

如果沒有工作小提琴,很難跟蹤。就我個人而言,我可能會略有不同。也許我會首先創建一個包含5000個隱藏粒子的數組,並將其固定。然後,當循環時,我會改變對象的x,y和可見性。由於您不是在時間間隔內創建/刪除對象,它可能會有所幫助。 – Ian 2015-03-03 11:19:41

+0

不能幫助改變流程,我讀到即使那樣也會發生同樣的事情,有什麼辦法可以解決這個問題嗎? – JDZ 2015-03-03 11:39:57

+0

你從哪裏讀到同樣的事情會發生?你不需要改變流程。不要每次都創建對象,改變它們的屬性。 – Ian 2015-03-03 11:56:18

回答

0

這是我唯一的問題。我忘記清除窗口變量中的對象數組

相關問題