Wyciek pamięci (jQuery), jedna zakładka zajmuje 1GB pamięci w chrome Opcje

[kamloo21]

Hej
Mam problem z jquery , napisałem kilka animacji , wszystko ładnie działa lecz po pewnym czasie (jakieś 10min) drastycznie zwiększa się użycie pamięci które dochodzi do 1GB na 1 zakładke w Chrome.
Domyślam się że animacja jest źle zloopowana ale wydaję mi sie że jest OK. Próbowałem kilku różnych rzeczy

http://wytestuj.cba.pl/tyla/send.php Chodzi mi o tą animacje konkretnie (na reszcie strony jest inna więc nie zmieniajcie zakładki)

[HTML] pobierz, plaintext 
$(document).ready(
			function animuj(){
				$("#loga").animate(
					{ backgroundPosition: "+=2000" }, 19000  //animacja paska na dole
				).animate(
					{ backgroundPosition: "-=2000" }, 19000  //animacja paska na dole
				);
 
			$("p.active").prev("p").css("border-bottom-color","#363732"); //zmiana koloru ramki nad .active
 
			$("#menu p").hover( 									//animacja menu
				function(){
					$(this).prev().css("border-bottom-color","#363732");
					$(this).addClass("hover");
				},
				function(){
					if(!$(this).hasClass('active'))
						$(this).prev().css("border-bottom","#666 dotted 2px");
 
					$(this).removeClass("hover");
				}
			);
 
			setInterval(animuj,40000);
			}
		);
[HTML] pobierz, plaintext 

[zegarek84]

To co Ty napisałeś już poprawniej powinno działać przy takim zapisie (minimalna modyfikacja tylko więc HOVER będzie przypisywany dodatkowo przy każdej animacji - tu też będzie minimalny wyciek pamięci ale większość by go pominęła...)

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(
  function(){
    function animuj(){
      $("#loga").animate(
      {
        backgroundPosition: "+=2000"
      }, 19000  //animacja paska na dole
      ).animate(
      {
        backgroundPosition: "-=2000"
      }, 19000  //animacja paska na dole
      );
 
      $("p.active").prev("p").css("border-bottom-color","#363732"); //zmiana koloru ramki nad .active
 
      $("#menu p").hover( 									//animacja menu
        function(){
          $(this).prev().css("border-bottom-color","#363732");
          $(this).addClass("hover");
        },
        function(){
          if(!$(this).hasClass('active'))
            $(this).prev().css("border-bottom","#666 dotted 2px");
 
          $(this).removeClass("hover");
        }
        );
 
    }
    setInterval(animuj,40000);
    animuj();
  }
);
[JAVASCRIPT] pobierz, plaintext 

skoro hover wystarczy raz przypisać więc dla zobrazowania z zapamiętanym elementem do animacji kod można by zapisać w ten sposób (urzyta tutaj 1 zmienna globalna - można to inaczej zapisać...)

[JAVASCRIPT] pobierz, plaintext 
var jLoga;
function animuj(){
  jLoga.animate(
  {
    backgroundPosition: "+=2000"
  }, 19000  //animacja paska na dole
  ).animate(
  {
    backgroundPosition: "-=2000"
  }, 19000  //animacja paska na dole
  );
 
  $("p.active").prev("p").css("border-bottom-color","#363732"); //zmiana koloru ramki nad .active
}        
$(document).ready(
  function start(){
    jLoga = $("#loga");
    $("#menu p").hover( 									//animacja menu
      function(){
        $(this).prev().css("border-bottom-color","#363732");
        $(this).addClass("hover");
      },
      function(){
        if(!$(this).hasClass('active'))
          $(this).prev().css("border-bottom","#666 dotted 2px");
 
        $(this).removeClass("hover");
      }
      );
    setInterval(animuj,40000);
    animuj();
  }
);
[JAVASCRIPT] pobierz, plaintext 

bez zmiennej globalnej można by np. w ten sposób - sposobów jest wiele i nie chcę narzucać rzadnego stylu, urzyta jest tutaj tylko dodatkowa anonimowa funkcja

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(
  (function(){
    var jLoga;
    function animuj(){
      jLoga.animate(
      {
        backgroundPosition: "+=2000"
      }, 19000  //animacja paska na dole
      ).animate(
      {
        backgroundPosition: "-=2000"
      }, 19000  //animacja paska na dole
      );
 
      $("p.active").prev("p").css("border-bottom-color","#363732"); //zmiana koloru ramki nad .active
    }
    function start(){
      jLoga = $("#loga");
      $("#menu p").hover( 									//animacja menu
        function(){
          $(this).prev().css("border-bottom-color","#363732");
          $(this).addClass("hover");
        },
        function(){
          if(!$(this).hasClass('active'))
            $(this).prev().css("border-bottom","#666 dotted 2px");
 
          $(this).removeClass("hover");
        }
        );
      setInterval(animuj,40000);
      animuj();
    }
    return start;
  })()
);
[JAVASCRIPT] pobierz, plaintext 

w tamtym miejscu gdzie wcześniej miałeś setInterwal prędzej pasowała funkcja setTimeout...

ps.
nie wiem czy p.active zmienia się dynamicznie czy nie więc nie buforowałem tych selektorów... ale jeszcze jeśli gdzieś zmieniasz klasę .active to można by zbuforować jakiś element nadrzędny nie zmieniający się z jakimś np. id i w jQuery skożystać z kontekstów, więc nie szukać tych elementów p.active w całym dokumencie HTML tylko podać kontekst - ale to już takie zagadnienia optymalizacyjne...

Ten post edytował zegarek84 2.05.2013, 16:41:41