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 

po pewnym czasie masz wieeele razy odpaloną funkcję animuj i cyklicznie w postępie lawinowym podpinany setInterval(animuj,40000) - w tym miejscu co jest wystarczył by setTimeOut... lub troszkę inaczej to zapisać...

ps. nie potrzebnie wiele razy podpinasz .hover... prędzej byś skożystał z .delegate (coś jak .live)

ps2. skoro elementy #loga i #menu sa w drzewie DOM po .ready to mógłbyś te elementy wyszukać i zapamiętać w jakiejś zmiennej by ich nie szukać stale po selektorach CSS

ps3. jeśli elementy #menu nie zmieniają sie dynamicznie to wystarczyło by raz podpiąć .hover...

Tzn .hover mam podpięte dokładnie 1 raz , chodzi ci o to żeby znajdował sie poza funkcją animuj , tak ?

Co do tych selektorów , to zapisać je przed .ready() czy w środku ? Bo wydaje mi się że mimo wszystko one i tak będą sie wyszukiwać na nowo

Zaraz spróbuję z tym setTimeOut i dam znać

Dzięki za nakierowanie

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...

Poczytałem troche o setInterval i setTimeout i zastosowałem sie do twoich rad.
Sama zamiana z setInterval na setTimeout rozwiązała problem i teraz strona sie nie zawiesza i nie pobiera 1GB pamięci , lecz nadal bierze ~140MB co jest dużą liczbą
Myśle że drugie rozwiązanie które mi podesłałeś będzie OK, jak przerobie to napisze co i jak. Dzięki !


PS. W drugim rozwiązaniu jest var jLoga;
Czemu odrazu nie ustawiłeś wartości jLoga = $("#loga") ?

tylko to zależy, kiedy zaczyna się o tym myśleć ;p - a to dosyć ważne, gdyż jest to dostępne dopiero po documentready ;p, czyli jak cały DOM załadowany, po to z tej metody kożystałeś... ;p... trochę inaczej zapisane a to samo znaczące ;p - po prostu wcześniej tego elementu anie znajdziesz...

[JAVASCRIPT] pobierz, plaintext 
(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();
  }
  $(document).ready(
    start
    );
})();
[JAVASCRIPT] pobierz, plaintext 

1. w Google Chrome jest profiler (z którego się dopiero uczę korzystać, w zasadzie dzięki temu wątkowi, zmotywowałem się i zacząłem się bawić (Ctrl + Shift + J, wybierz zakładkę Profiles, dalej "Take Heap Snapshot"). Może coś odkryjesz.

2. zainteresowałbym się animacjami CSS3 (@keyframes etc.) zamiast jQuery.animate (nie wiem czy to rozwiąże twój problem z pamięcią, bo problem może być gdzie indziej, ale spróbowac można)

podejrzałem dzisiaj kod na Twojej stronie i widzę, że zrobiłeś "misz masz..." - zwróć uwagę, że nie buforujesz wyszukiwanych elementów choć je przypisujesz do zmiennej gdyż masz przypisane do zmiennej wewnątrz funkcji... masz teraz 2 funkcje animuj o.O - oczywiście wywoływana jest ta z bliższym scope...

Na strone wrzuciłem twoja wersje a moja wersja jest w komentarzu , wczoraj potestowałem to wszystko i teraz pobór pamięci utrzymuje się w granicach 26MB nawet po kilku godzinach więc udało się Dzięki.
Jeszcze troche popracuje nad tym i będzie miodzio

@edit

W Chromie jest lepsza opcja , jak wejdziesz w Timeline kliknij na dole Record i masz cały wykres zużycia pamięci , FPSów itd