动态创建的元素和单击处理程序会导致IE9中的内存泄漏

时间:2013-07-10 07:47:18

标签: javascript jquery memory-leaks onclick

脚本很长,所以我会尝试解释而不是粘贴所有内容。编辑:看起来我需要再展示一点。

每隔几次我用新内容更新UL(调用updateDomTree)。 DOM树表示CKEditor内的元素。

function updateDomTree(editor) {
    var selection = editor.getSelection();
    var jqElements = $(document.createElement('div'));
    var editorData = editor.document.getBody();
    var kids = editorData.getChildren();

    // Gather LI to represent Editor content DOM element hierarchy
    for (var i = 0, len = kids.count(); i < len; i++) {
        jqElements.append(HandleNode(kids.getItem(i), selectedElement, editor));
    }

    var domUL = document.createElement('ul');
    domUL.id = "dom";
    var jqUL = $(domUL).append(liElements);
    $(document.getElementById('dom')).replaceWith(jqUL);
}

// This is a recursive function, but it has no other issues than the memory leak
// If I comment out the click event, it works fine. 
// The **obj** variable is why I don't use the "delegation" method.
function HandleNode(obj, selection, editor) {
    // do other stuff, handle recursion etc.
    liElement.on('click', function(e) {
        editor.getSelection().selectElement( obj );
        editor.focus();
        editor.getSelection().scrollIntoView();
        e.stopPropagation();
    }); 
    return liElement;
}

现在在IE9中,内存使用率开始快速攀升。如果我注释掉点击处理程序,内存泄漏消失但我没有功能。我该如何解决这个问题?

替代解释:#dom是DOM结构的UL可视化表示,我需要click事件来引用元素,这就是我在创建click事件处理程序期间需要对象引用的原因。当底层DOM发生变化时,UL表示应该反映出这种变化,这就是快速更新的原因。

2 个答案:

答案 0 :(得分:1)

每次创建li元素时,您都可以使用事件委派并将一个处理程序绑定到ul本身,而不是创建新的处理程序:

// when you create the list :
$('#dom').on('click', 'li', function(e) {
    // do some cool stuff
    e.stopPropagation();
});

// instead of creating a new ul,
// replace thhe existing ul's content
$('#dom').empty().append(liElements);

如果您需要存储每个节点的自定义数据,请尝试使用.data()功能:

$(liElement).data('obj', obj);

然后,您可以从处理程序访问它:

$('#dom').on('click', 'li', function(e) {
    var obj = $(this).data('obj');
    ...
    e.stopPropagation();
});

通过这种设计,javascript将不必维持实时闭包以保持对obj变量的访问。我不是百分百肯定会把你的记忆泄漏掉,你将不得不进行测试和看。

答案 1 :(得分:0)

将其委托给UL的级别,只需将其设置为UL元素为DOM可用:

$('#dom').on('click','li', function(e) {
    // do some cool stuff
    e.stopPropagation(); //stopPropagation couldn't give you expected result depending why you need to stop bubbles and at which level, check it.
});