[DHTML] Eventhandlers lekken geheugen

[Amras]

Ik heb hier een probleempje met eventhandlers in mn JScript code, op 1 of andere manier lekken ze geheugen.

Allereerst zal ik uitleggen wat ik gemaakt en geprobeerd heb. Waar het fout gaat is hier:

JavaScript:

// this.tilesCountHor is het aantal tiles in horizontale richting
for(var i = 0; i < this.tilesCountHor; i++) {
    for(var j = 0; j < this.tilesCountVer; j++) {

        // Maak een tile en positioneer hem
        var topTile = new Div();
        topTile.setID(this.tilesTop.length);
        topTile.setBounds(i * 17 + 1, j * 17 + 1, 16, 16);
        topTile.setCursor("hand");

        // Hier lekt ie geheugen!
        topTile.div.onclick = function() {
            alert("HOI");
        }

        this.toplayer.add(topTile.div);
    }
}

Voor de duidelijkheid zal ik ook nog een stuk van het object Div posten (zijn allemaal get's en set's maar het scheelt een hoop code):

JavaScript:

function Div() {
    this.div = document.createElement("DIV");
    this.div.style.position = "absolute";
}

Div.prototype.setBounds = function(x, y, w, h) {
    with(this.div.style) {
        left = x;
        top = y;
        width = w;
        height = h;
    }
}
... etc ...

Ik heb hier voor this.tilesCountHor en this.tilesCountVer beide de waarde 13 genomen en zo worden er 169 topTiles gemaakt. Als ik nu mn page refresh in
IE dan komt er 40kb bij aan geheugen en dat wil ik natuurlijk niet. Nu heb ik het een en ander geprobeerd, ik vervang hier de eventhandler in:

JavaScript:

topTile.div.onclick = function() {
    // alert("HOI");
}

Resultaat: lekt 40kb per refresh

JavaScript:

topTile.div.onclick = alert;

Resultaat: lekt niet

JavaScript:

var mouseClickFunc = new Function("alert('hoi')");
topTile.div.onclick = mouseClickFunc;

Resultaat: lekt niet

Het irriteert me vooral omdat ik nu op een andere manier moet coden en omdat ik niet begrijp waarom het nu fout gaat (doe het vaker op deze manier en
heb nooit problemen). Het is ook vervelend om 10 regels code in een new Function(..) te moeten gooien. Verder heeft een maat van me 1000 DIVs op het
scherm getoverd met handlers eraan en die had nergens last van.

Kan iemand me hiermee helpen? Ik ben al een aantal uur hiermee aan het tobben. Ik hoop dat het zo voldoende duidelijk is...

[ Voor 4% gewijzigd door Amras op 18-08-2003 17:15 ]

[Verwijderd]

welke versie van IE?

[Amras]

Versie 6

[André]

Ik denk dat het gewoon aan het geheugenmanagement van IE ligt, kun je weinig aan doen.

[Verwijderd]

Of aan zijn computer aangezien hij er niet altijd last van heeft

[Amras]

Ik heb het bij iemand anders laten testen, hetzelfde probleem (ook IE6).

[Verwijderd]

dan is het idd zeer waarschijnlijk wat André al aanhaalde hierboven, brak geheugen management. Heb je al getest in een andere browser om te kijken of het fenomeen ook daar optreed?

[Amras]

Nee nog niet... dat zou ik niet fijn vinden trouwens want het geheugengebruik loopt vrij snel op zo. Toch begrijp ik niet hoe iemand anders dan 1000 DIVs met handlers op het scherm kan toveren en geen lek heeft. Zeer frustrerend.

[Verwijderd]

Hmm staat me iets van bij dat Clay er wel 10000 had in een van zijn stress testen.

[RSchellhorn]

Met de volgende code kan ik heeeeel veel div's creeeren, zonder dat IE 6.0 lekt:

JavaScript:

// deze funtie globaal zetten (dus gelijk in document)
function processEvent() {
    var bron = event.srcElement;
    switch (event.type) {
        case "click":
            // je click event voor 'bron'
            break;
    }
}

// en bij je object: (op Amras z'n code gebaseerd)
obj.div.onclick = processEvent;

Enige nadeel is dat srcElement rechtstreeks naar de div wijst en niet naar het object er om heen, die moet je dus zelf opzoeken.

[ Voor 8% gewijzigd door RSchellhorn op 19-08-2003 16:04 . Reden: typo's ]