Clearing memory in browsers

Question

I have an image rotator that creates a div for a new slide, hides the current slide, shows the new div, and removes the hidden div. All this is done with jquery and I'm using this code to remove the slides I don't need anymore:

var last = $("#item_" + lastSlide + "_" + idSuffix);
last.empty();
last.remove();
last = null;

The memory is still increasing after each slide. Any ideeas about how can I efficiently clear the memory?

It's unlikely the memory leak occurs in the code you've posted; it's more likely to be in the rotator or somewhere else. — Dave Newton, Oct 25 '11 at 19:46
in javascript you have no control over memory. The best way is to write more efficient code around this. show your code on how you create your slide maybe we can help you improve it — Ibu, Oct 25 '11 at 19:48
Garbage collecting processes cannot remove anything from memory until all references to it are removed. This has been written about quite a bit: http://stackoverflow.com/questions/864516/what-is-javascript-garbage-collection, http://stackoverflow.com/questions/774357/garbage-collection — Jasper, Oct 25 '11 at 19:50
Seems like duplicate of http://stackoverflow.com/questions/3785258/how-to-remove-dom-elements-without-memory-leaks — Lycha, Oct 25 '11 at 19:52

score 0 · Accepted Answer · answered Apr 17 '12 at 08:54

0

The best solution I've came up with was to clear the html content before I remove the element.

For example:

myDiv.html("");
myDiv.remove();

answered Apr 17 '12 at 08:54

gabitzish

9,535
7
44
65

bopjesvla · Answer 2 · 2011-10-25T20:24:21.667

It's not smart to use different elements for different slides. You should use two elements for a fading slideshow. This is a code I wrote some time ago:

el = function(q) {return document.getElementById(q)};

var slides=["logo.jpg","avond.jpg","bar.jpg","buitencloseup.jpg","servet.jpg","spelcomputers.jpg","tafelaanbar.jpg","tafelsbuiten.jpg"],
Math.floor(Math.random()*slides.length),
highimg=el("highimg"),
lowimg=el("lowimg"),
fade,
changeslide=function() {
    lowimg.style.backgroundImage=highimg.style.backgroundImage
    highimg.style.backgroundImage="url(img/slideshow/"+(slides[++_src]||slides[_src=0])+")"
    var time=highimg.style.opacity=0;
    highimg.style.filter="alpha(opacity=0)"

    if (fade)
    clearInterval(fade)

    fade=setInterval(function(){
        if(highimg.style.opacity<1)
        highimg.style.filter="alpha(opacity="+(highimg.style.opacity=time+=1/40)*100+")"
        else
        {
            highimg.style.filter="alpha(opacity=100)";
            highimg.style.opacity=1
            clearInterval(fade);
        }
    },25)
}
interval=setInterval(changeslide,10000)
highimg.onclick = changeslide
changeslide()

i know you took a while to write this, but it is very confusing, please add more comments to make it more understandable — Ibu, Oct 25 '11 at 20:19
I'm not changing only images. I'm displaying html content too. So I think it isn't helping because those two containers will be populated with html content that must be removed too. — gabitzish, Oct 25 '11 at 20:24
Does every slide has the same structure? For example: header, subheader, information, image. Then you could reuse every element with different text and attributes. — bopjesvla, Oct 25 '11 at 20:46

Clearing memory in browsers

2 Answers2