none
JavaScript Handle leak. What is causing it and how do I fix it? RRS feed

  • Question

  • I've noticed that I have a JavaScript memory leak. I'm changing the header picture on a preset time, and each time it calls my switchImage() function the Handle count increases for the IE instance. If I leave the browser running overnight and lock my computer, IE eats up quite a bit of memory this way.

    Here's my code (I omitted some irrelevant parts of stuff, mainly concerning the retrieval of the Timeout variable):

    tid = setInterval(switchImage, parseInt(Timeout));
    
    function switchImage() {
      $.getJSON("/_vti_bin/ListData.svc/Bannerikuvakirjasto", function (imagedata) {
        var preshuffle = "";
        shuffledData = shuffle(imagedata.d.results);
    
        var src = shuffledData[0].__metadata.media_src;
    
        if (src == srcPrevious) {
          src = shuffledData[1].__metadata.media_src;
          srcPrevious = src;
        }
        else {
          srcPrevious = src;
        }
    
        var srcString = "url('" + src + "')";
        $('<img />').attr('src', 'imageURL.jpg').load(function () { $('#header').append($(this)); });
        $("#header").css("background-image", srcString);
      });
    }
    
    shuffle = function (o) { //v1.0
      for (var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
      return o;
    };

    What's causing the memory leak? I'm no expert in JavaScript, much less identifying memory leaks. So I'd appreciate any help on solving this issue. :)

    Tuesday, May 3, 2011 7:54 AM

Answers

  • Fixed!

    It turned out our JQuery.min.js file was slightly out of date. We had version 1.4.4. We updated to version 1.6, and the leak disappeared. :)

    • Marked as answer by Kaerwek Wednesday, May 4, 2011 10:13 AM
    Wednesday, May 4, 2011 10:13 AM

All replies

  • Please note, that between image switches, I want to keep record of the srcPrevious value. So I can't simply do away with all variables between switching pictures...
    Tuesday, May 3, 2011 8:03 AM
  • I've tried using the scarcely documented CollectGarbage() method in conjunction with setting variables to null but that won't really help. Handle count keeps growing.

     

     

    function switchImage() {
     $.getJSON("/_vti_bin/ListData.svc/Bannerikuvakirjasto", function (imagedata) {
      //var preshuffle = "";
      shuffledData = shuffle(imagedata.d.results);
    
      var src = shuffledData[0].__metadata.media_src;
    
      if (src == srcPrevious) {
       src = shuffledData[1].__metadata.media_src;
       srcPrevious = src;
      }
      else {
       srcPrevious = src;
      }
    
      var srcString = "url('" + src + "')";
      $('<img />').attr('src', 'imageURL.jpg').load(function () { $('#header').append($(this)); });
      $("#header").css("background-image", srcString);
      src = null;
      shuffledData = null;
      CollectGarbage();
     });
     CollectGarbage();
    }

     

    srcPrevious is actually initialized in the document.Ready() scope. I wonder, does the resassignment of srcPrevious cause Handles leak? If so, can I develop further this so that I have two srcPrevious values, and two methods for switching Image. In switchImageA I'd set srcPreviousA to null and in switchImageB I'd set srcPreviousB to null. This way I could perhaps ensure that srcPrevious does got also garbageCollected every now and then.

    Also, as a note: With and without CollectGarbage() and setting variables to null, the handles count always increases by 2 each time the method is called.
    Tuesday, May 3, 2011 10:30 AM
  • Hi,

    I found out you appended a element to element with id header.

    So what is 'this' in '$(this)'?

    It seems that you got an endless loop.


    Microsoft Online Community Support
    Wednesday, May 4, 2011 2:44 AM
  • Hi Chen,

    You were correct, I had a mistake in that code. I noticed then that that line was completely unnecessary. So I removed it altogether. Nevertheless, handle count keeps incrementing with 2 each time the image changes. The method I have is currently like this:

     

    function switchImage() {
      $.getJSON("/_vti_bin/ListData.svc/Bannerikuvakirjasto", function (imagedata) {
        shuffledData = shuffle(imagedata.d.results);
    
        var src = shuffledData[0].__metadata.media_src;
    
        if (src == srcPrevious) {
          src = shuffledData[1].__metadata.media_src;
          srcPrevious = src;
        }
        else {
          srcPrevious = src;
        }
    
        var srcString = "url('" + src + "')";
        $("#header").css("background-image", srcString);
        src = null;
        shuffledData = null;
        CollectGarbage();
      });
      CollectGarbage();
    }

     

    I personally suspect at this point that this line might leave open handles:

    $.getJSON("/_vti_bin/ListData.svc/Bannerikuvakirjasto", function (imagedata) 

    Apparently there are more cases where $.getJSON causes memory leaks...:
    http://forum.jquery.com/topic/simple-getjson-code-and-memory-loss

    Still looking for an answer.

    Wednesday, May 4, 2011 9:39 AM
  • Fixed!

    It turned out our JQuery.min.js file was slightly out of date. We had version 1.4.4. We updated to version 1.6, and the leak disappeared. :)

    • Marked as answer by Kaerwek Wednesday, May 4, 2011 10:13 AM
    Wednesday, May 4, 2011 10:13 AM