Chiusura Javascript: Perdita di memoria

Question

Ho una perdita di memoria che non capisco. Ho programmato un meccanismo per gestire l'evento con lo slegamento semiautomatico che dovrebbe permettermi di pulire facilmente la memoria. Ma in un caso, la pulizia non avviene (utilizzo il profilo di Chrome (heap di memoria) "per verificare la presenza di istanze di" EventHandler "a sinistra). Non capisco davvero perché succede. C'è qualcosa di strano con la chiusura ...

see it in action with chrome

function Bind(obj, f) { 
    return function() { 
     return f.apply(obj, arguments); 
    } 
} 

function EventHandler() { 
    this.listeners = new Object(); 

    var _listenerID = 0; 
    this.addListener = function(e, obj, listener, specialDisplay) { 
     if (typeof(listener) === "function") { 
      var listenerID = ++_listenerID; 
      console.log("Events (" + (++EventHandler.All) + ", " + listenerID + ") ++" + e); 

      if (!this.listeners.hasOwnProperty(e)) { 
       this.listeners[e] = new Object(); 
      } 
      this.listeners[e][listenerID] = listener; 

      if (obj != null && typeof(obj.removeListener) == "function") { 
       var deleteListenerID = obj.addListener("Delete", null, Bind(this, function() { 
        this.removeListener(e, listenerID); 
        obj.removeListener("Delete", deleteListenerID); 
       })); 
      } 

      return listenerID; 
     } 

     return null; 
    } 
    this.fire = function(e, obj) { 
     if (this.listeners.hasOwnProperty(e)) { 
      for(var i in this.listeners[e]) { 
       this.listeners[e][i](obj); 
      } 
     } 
    } 
    this.removeListener = function(e, listenerID) { 
     if (this.listeners.hasOwnProperty(e) && this.listeners[e].hasOwnProperty(listenerID)) { 
      delete this.listeners[e][listenerID]; 

      console.log("Events (" + (--EventHandler.All) + ", " + listenerID + ") --" + e); 
     } 
    } 
} 

EventHandler.All = 0; 

function Loader() { 
} 

Loader.files = new Object(); 

Loader.LoadImage = function(src, f) { 
    if (!Loader.files.hasOwnProperty(src)) { 
     var handler = new EventHandler(); 

     console.log("Loading.... (" + src + ")"); 

     Loader.files[src] = function(fnct) { 
      handler.addListener("ImageLoaded", handler, function(img) { 
       fnct(img); 
      }); 
     } 

     handler.addListener("ImageLoaded", handler, function() { 
      Loader.files[src] = function(fnct) { 
       fnct(img); 
      } 
     });  

     var img = new Image(); 
     $(img).load(function() { 
      console.log("Loaded.... (" + src + ")"); 
      handler.fire("ImageLoaded", img); 
      handler.fire("Delete"); 
      $(img).unbind('load'); 
     }); 
     img.src = src; 
    } 

    Loader.files[src](f); 
} 

Loader.LoadImage("http://serge.snakeman.be/Demo/house.jpg", function() { alert("ok"); }); 

Answer 1

Si crea chiusure che contengono un riferimento a un EventHandler esempio tramite la variabile handler. Una delle chiusure rimane dopo che l'immagine è stata caricata:

handler.addListener("ImageLoaded", handler, function() { 
     Loader.files[src] = function(fnct) { 
      fnct(img); 
     } 
    });  

È la funzione interna function(fnct) {.... L'istanza di EventHandler non può essere liberata finché esiste la chiusura. La tua unica soluzione è liberarti di quella chiusura. Oppure si libera l'istanza manualmente, se possibile. Quanto segue potrebbe funzionare per voi:

handler.fire("Delete"); 
handler = undefined; 

profiler di memoria di Chrome mostra albero mantenendo dell'oggetto, che è solo un altro modo per dire "Chi è in possesso di un riferimento a tale oggetto". Nel tuo esempio è EventHandler < - handler (la variabile del metodo LoadImage come incorporata dalla chiusura) < - house.jpg, che in realtà è Loader.files[src] e ha il valore function(fnct) { fnct(img); }.

Answer 2

Mentre si aggiunge "ascoltatori", assicurarsi di rimuoverlo, se si utilizza la query per un lungo periodo di tempo.

this.listeners = new Object(); 

o

this.listeners[e] = new Object(); 

questo aggiungerà oggetto ascoltatore matrice, ma non rimuoverli in qualsiasi punto.

Questa potrebbe essere la causa del consumo di memoria. Potrebbe non perdere, la sua assegnazione di oggetti. che consuma la tua RAM usando il browser. :)