使用 raphael.js 重新渲染时内存泄漏答案

【问题标题】：Memory leak while re-rendering using raphael.js使用 raphael.js 重新渲染时内存泄漏
【发布时间】：2015-05-03 23:07:30
【问题描述】：

我正在使用 raphael.js 将形状呈现到画布上，但问题是存在内存泄漏并且页面在一段时间后崩溃。有人可以帮助我如何处理它吗？我正在使用 underscore.js 来处理循环，但仍然没有运气。我尝试将库更改为 svg.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

【问题讨论】：

没有工作的小提琴很难跟踪。就我个人而言，我可能会略有不同。也许我会首先创建一个包含 5000 个隐藏粒子的数组，然后保持不变。然后在循环时我会改变对象的 x、y 和可见性。由于您没有在时间间隔内创建/删除对象，因此可能会有所帮助。
无法帮助改变流程，我读到即使那样也会发生同样的事情，有什么办法可以解决这个问题吗？
你从哪里读到同样的事情会发生？您无需更改流程。只是不要每次都创建对象，更改它们的属性。
数量随时间变化，所以我必须销毁旧数量的对象并创建新的。

标签： javascript jquery svg raphael svg.js

【解决方案1】：

这只是我的问题。我忘了清除窗口变量中的对象数组

【讨论】：