Javascript内存泄漏删除Raphael路径对象

我的代码中有内存泄漏，我无法找出原因。我从一个

WebSocket

接收目标数据，它基本上包含一个ID和一个X，Y坐标。数据被传递到

HandleData

函数，该函数为每个目标创建一个圆，并创建一条线（该线已更新），以显示目标从/移动到的位置

如果目标不再出现在

WebSocket

流中，则会将其删除。在测试中，我发现尽管我删除了这些项目，但网页很快积累了数百mb的数据。在使用Chrome的内存分析器时，似乎Raphael（或其他什么）保留了所有的路径信息，尽管我删除了它

如果有人能在任何方面帮助我，我将非常感激。拉斐尔似乎在保留数据，但我很有可能在代码中的某个地方犯了错误：）

var arrayColours=[“f33”、“3f3”、“33f”、“f66”、“6f6”、“66f”]；
var targetStructArray=[]；
函数HandleTargetData（数据）{
//检查所有现有目标，并将其标记为未更新
对于（var i=0；i=0；i--）{
如果（！targetStructArray[i]。已更新）{
targetStructArray[i].circle.remove（）；
targetStructArray[i].path.remove（）；
targetStructArray[i].circle.removeData（）；
targetStructArray[i].path.removeData（）；
targetStructArray[i]。圆=null；
targetStructArray[i]。路径=null；
targetStructArray[i]=null；
targetStructArray.remove（i）；
}
}
}

---

我使用了此处未列出的两个函数，分别是和一个Raphael helper函数，它们来自不同的

我看到您使用

itemsToRemove

更新了代码。问题仍然存在：

targetStructArray

的索引随着每个

remove

的移动而移动，从而使

itemsToRemove

无效。嗨@katspaugh-我根据你的原始评论再次更新了我的代码。谢谢你的建议。。。关于内存泄漏有什么想法吗？没有。有人可能会建议不要删除，而是重用Raphaёl对象。@katspaugh我也读过，并且已经实现了它，这使事情变得更好，但它仍然泄漏……它可能不是您的代码。几个月前，我也有一个内存泄漏，结果证明是拉斐尔的问题。它将所有路径数据保存在一个数组中的某个位置，即使不再需要它。不幸的是，已经有一段时间了，所以我记不起确切的问题。

var arrayColours = ["#f33", "#3f3", "#33f", "#f66", "#6f6", "#66f"];

var targetStructArray = [];

function HandleTargetData(data) {

    //Go through all our existing targets and mark them as not updated
    for (var i = 0; i < targetStructArray.length; i++) {
        targetStructArray[i].updated = false;
    }

    for (var i = 0; i < data.targets.length; i++) {
        var targetData = data.targets[i];
        var targetStruct = undefined;

        //find our targetStruct
        for (var j = 0; j < targetStructArray.length; j++) {
            if (targetStructArray[j].id == targetData.id) {
                targetStruct = targetStructArray[j];
                break;
            }
        }

        //If it doesnt exist, create it
        if (!targetStruct) {
            var path = paper.path();

            path.attr({ "stroke-width": "2", "stroke": "#888" });
            path.addPart(['M', targetData.x, targetData.y]);

            var circle = paper.circle(targetData.x, targetData.y, 15, 15).attr({
                stroke: "none",
                fill: arrayColours[Math.floor(Math.random() * arrayColours.length)] //random colour
            });

            //Create our struct
            targetStruct = {
                circle: circle,
                path: path,
                id: targetData.id,
                updated: false
            };

            targetStructArray.push(targetStruct);
        }
        else {
            targetStruct.circle.attr({ cx: targetData.x, cy: targetData.y });
            targetStruct.path.addPart(['L', targetData.x, targetData.y]);
        }

        //ensure we are set as updated
        targetStruct.updated = true;
    }

    //Go through all our existing targets and delete any that werent updated
    for (var i = targetStructArray.length - 1; i >= 0; i--) {
        if (!targetStructArray[i].updated) {
            targetStructArray[i].circle.remove();
            targetStructArray[i].path.remove();

            targetStructArray[i].circle.removeData();
            targetStructArray[i].path.removeData();

            targetStructArray[i].circle = null;
            targetStructArray[i].path = null;

            targetStructArray[i] = null;
            targetStructArray.remove(i);
        }
    }
}