setInterval JavaScript内存泄漏

Question

I can't figure out why the memory is increasing and it stays there each time I run this code:

easingFunction = function (t, b, c, d) {
    if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
    return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
}
processFrame = function () {
    for (var i = 0; i < tiles.length; i++) {
        var tile = tiles[i];
        tile.percent += 4;
        if (tile.percent > 0) {
            var TH = Math.max(0, Math.min(TILE_HEIGHT, targetObj.height - tile.imageY));
            var TW = Math.max(0, Math.min(TILE_WIDTH, targetObj.width - tile.imageX));
            var SW, SH, SX, SY, amount;
            draw.save();
            draw.translate(tile.imageX, tile.imageY);
            if (direction == "tb" || direction == "bt") {
                amount = easingFunction(tile.percent, 0, TW, 100);
                SW = Math.min(TW, amount);
                SH = TH;
                SX = 0;
                SY = 0;
            } else {
                amount = easingFunction(tile.percent, 0, TH, 100);
                SW = TW;
                SH = Math.min(TH, amount);
                SX = 0;
                SY = 0;
            }
            draw.drawImage(copycanvas, tile.imageX, tile.imageY, SW, SH, SX, SY, SW, SH);
            draw.restore();
        }
    }
    var ok = true;
    for (i = 0; i < tiles.length; i++) {
        if (tiles[i].percent < 100) {
            ok = false;
            break;
        }
    }
    if (ok) {
        clearInterval(interval);
        showComplete();
    }
};
this.show = function (target, hideTarget) {
    createTiles();
    for (var i = 0; i < tiles.length; i++) {
        var tile = tiles[i];
        tile.percent = 0 - i * 10;
    }
}
var intervalDelay = (config.duration * 1000) / (tiles.length * 3 + 25);
interval = setInterval(function () {
    processFrame();
}, intervalDelay);
};

function Tile() {
    this.imageX = 0;
    this.imageY = 0;
    this.percent = 0;
};
};

I left out some unimportant code. The ideea is that I call externally the show() function. The setInterval is initialized and runs processFrame() about 100 times.

I've tried to leave some code outside from processFrame, and I got to :

processFrame = function () {
    for (var i = 0; i < tiles.length; i++) {
        var tile = tiles[i];
        tile.percent += 4;
    }
    var ok = true;
    for (i = 0; i < tiles.length; i++) {
        if (tiles[i].percent < 100) {
            ok = false;
            break;
        }
    }
    if (ok) {
        clearInterval(interval);
        showComplete();
    }
};

But the memory still increases.

Answer 1

Try validating your code with JSLint. http://www.jslint.com/

Right now your adding easingFunction & processFrame to the Global object (which isn't a good thing). Not that this is the cause of the problem, but I've found that mismanagement of my objects is the usual cause of memory leaks.

You'll want to do something like:

var MyObject = {}; 

MyObject.easingFunction = function(){};
MyObject.processFrame = function(){};

In short make sure you declare all objects with var before using them.

Answer 2

I found the problem. I was continuously redrawing the canvas. To resolve this problem I had to erase the canvas each time before modifying it.