Question

我认为我实际上有很多内存泄漏，但影响最大的是：

我创建了一个256 divs的网格
我将网格传递给淡出div的函数
然后我从DOM中删除了网格

最简单的解决方法是在fadeVertical完成后添加$cells = $grid = null;并在currentImageToGrid中添加$div = null;吗？还是比这更复杂？（请参阅我正在讨论的优化评论。）

我已经删除了很多代码，完整的JSFiddle就在这里：http://jsfiddle.net/GBWKh/

谢谢，

乔

function demoFoStackOverflow(){
    transition(750, function(){});
}

function currentImageToGrid(xCount, yCount) 
{
    var $container = $('<div />').addClass('grid').width($imgCurrent.width()).height($imgCurrent.height()).css({ marginLeft: (($imgCurrent.parent().width() - $imgCurrent.width()) / 2) + 'px' }).click(function () {
        $imgCurrent.trigger('click');
        $(this).remove();
    });
    var sliceWidth = Math.round($imageContainer.width() / xCount);
    var sliceHeight = Math.round($imageContainer.height() / yCount);
    var xMod = 0;
    var yMod = 0;
    for (var y = 0; y < yCount; y++) {
        for (var x = 0; x < xCount; x++) {
            var $div = $('<div/>');
            $div.css({
                height: sliceHeight + yMod,
                width: sliceWidth + xMod,
                left: x * sliceWidth + xMod,
                top: y * sliceHeight + yMod,
                backgroundImage: 'url(' + $imgCurrent.attr('src') + ')',
                backgroundPosition: (0 - x * sliceWidth + xMod) + 'px ' + (0 - y * sliceHeight + yMod) + 'px'
            });
            $container.append($div);
            // $div = null; <-- See here
        }
    }
    $imageContainer.append($container);
    return $container;
}


function transition(duration, callback) {
    // The more cells we have the better it looks but it lags in ff/ie
    var x = 16;
    var y = 16;
    var $grid = currentImageToGrid(x, y);
    $imgCurrent.hide(); 

    var transitionName;
        transitionName = _args.transitions[transitionIndex % _args.transitions.length];
    transitionIndex++;

    runTransition(transitionName, $grid, x, y, duration, function () {
        var waitForAnimationToEnd = setInterval(function () {
            // Although the set interval timer used in the trasition  has finished there may still be animations running
            if (!$grid.children().is(':animated')) {
                $grid.remove();
                callback();
                clearInterval(waitForAnimationToEnd);
            }
        }, 20);
    });
}


function runTransition(name, $grid, xCount, yCount, duration, callback) {
    if (name == 'fadeUp') { fadeUp($grid, xCount, yCount, duration, callback); }
    // Lots of others removed for brevity
}

function fadeUp($grid, xCount, yCount, duration, callback) {
    fadeVertical($grid, xCount, yCount, duration, callback, 'up');
}

function fadeVertical($grid, xCount, yCount, duration, callback, direction) {
    var y = direction == 'down' ? 0 : yCount - 1;
    var $cells = $grid.children();
    var timer = setInterval(function () {
        for (var x = 0; x < xCount; x++) {
            $($cells[y * xCount + x]).fadeTo(duration / yCount, 0);
        }
        if (direction == 'down')
            y++;
        else
            y--;
        if (y == 0 || y == yCount) {
            clearInterval(timer);
            // $cells = null; <-- See here
            // $grid = null; <-- See here
            callback();
        }

    }, duration / yCount);
}

Answer 1

这是WebShims库（它解释了为什么它在JSFiddle中运行良好。）删除WebShims修复了这个问题，在阅读文档之后我注意到了这一点：

extendNative（默认值：true）：Webshims lib将使用polyfilled方法自动扩展DOM-Objects，并且还将使用此方法名称生成jQuery插件。如果extendNative设置为false，则webshims lib将不会触及任何DOM对象，并且只会实现jQuery插件。将此选项设置为false可能对DOM性能也有好处。

我很确定设置它会修复它，如果没有，那么我将一起删除WebShims。

感谢所有评论的人的帮助。

乔

我有内存泄漏，这可以解决吗？

1 个答案: