Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: js, rekurencje, liczenie pomocy!
Forum PHP.pl > Forum > XML, AJAX > AJAX
daniofantasy
12.03.2011, 09:19:11
Witam,

Mam takie cudo:


[PHP] pobierz, plaintext 
  1. var ImgFader = function(FadeDelay,TimeDelay,x,aImages1,aImages2,aImages3,DOMElement,FirstTimeStart) {
  2.  
  3. 		var FirstFader = $(DOMElement[0]); 
  4. 		var SecondFader = $(DOMElement[1]);
  5. 		var ThirdFader = $(DOMElement[2]);
  6.  
  7. 		if (x==4) {
  8. 			x=1;
  9. 		}
  10.  
  11. 		var OldTimeDelay = TimeDelay;
  12.  
  13. 		if (FirstTimeStart) {
  14. 			TimeDelay = 0;
  15. 		}
  16.  
  17. 		setTimeout(function() {
  18. 			FirstFader.fadeOut(FadeDelay);
  19. 			SecondFader.fadeOut(FadeDelay);
  20. 			ThirdFader.fadeOut(FadeDelay);	
  21. 			setTimeout(function() {
  22. 				FirstFader.css('background','url('+aImages1[x-2]+')');
  23. 				SecondFader.css('background','url('+aImages2[x-2]+')');
  24. 				ThirdFader.css('background','url('+aImages3[x-2]+')');									
  25. 			}, FadeDelay);
  26.  
  27. 			FirstFader.fadeIn(FadeDelay);
  28. 			SecondFader.fadeIn(FadeDelay);
  29. 			ThirdFader.fadeIn(FadeDelay);
  30. 			x++;
  31. 			ImgFader(FadeDelay,OldTimeDelay,x,aImages1,aImages2,aImages3,DOMElement,false);
  32. 		}, TimeDelay);
  33. };
  34.  
  35. $(document).ready( function (){
  36. 	var images1 = new Array('images/Img1_1.jpg','images/Img2_1.jpg','images/Img3_1.jpg')
  37. 	var images2 = new Array('images/Img1_2.jpg','images/Img2_2.jpg','images/Img3_2.jpg')
  38. 	var images3 = new Array('images/Img1_3.jpg','images/Img2_3.jpg','images/Img3_3.jpg')
  39. 	var DOMElements = new Array('#Fader1','#Fader2','#Fader3');
  40. 	ImgFader(500,5000,1,images1,images2,images3,DOMElements,true);
  41. });
[PHP] pobierz, plaintext


i teraz jak po kodzie :


if (x==4) {
x=1;
}

wrzuce alerta, to przy każdym jednorazowym wywołaniu funkcji zamiast mi ładnie wyświetlić, że x=1 albo x=2 albo x=3, czego bym się spodziewał, ten zakichany js wali mi alertami z każdym kolejnym argumentem funkcji z którym rekurencja była wcześniej wywołana,

przez to nie mogę po tym if-ie zrobić ślicznego:

if (x == 1) {
...moje instrukcje...
}
Od razu zaznaczam, że o js mam tylko blade pojęcie - i tak - zdaję sobie sprawę, że powyżej cytowany kod jest daleki od dobrego webowego rzemieślnictwa - prosiłbym tylko osoby znające się na tym o pomoc w zrozumieniu o co chodzi - dlaczego mój x w tej funkcji wygląda tak: 123123123123 zamiast 1 lub 2 lub 3

Bo podejrzewam, że to coś nie tak z inkrementacją - bo dlaczego x które jest równe 1, zwiększone o 1 daje w wyniku 12 zamiast 2... :/ ... ?

Proszę o pomoc - z góry dziękuję smile.gif
kamil4u
12.03.2011, 13:16:45
Dodawanie w JS jest trochę ułomne smile.gif
Spróbuj najpierw zamienić ciąg na liczbę używając np. parseInt - zapewne JS traktuje Twój x jako ciąg(a nie liczbę) z niewyjaśnionych przyczyn smile.gif
daniofantasy
12.03.2011, 19:55:20
Witam, tak, próbowałem ParseIntem, ale nic to niestety nie dało... jakieś sugestie?

Z tego co googlam i widzę, to mój problem leży w tym, że dodając kolejne wartości do x, js traktuje je jako ciąg tekstowy, a nie liczby, czyli:

a = 1;
b = 1;
c = a+b;

i jak wyświetlę c, to mam 11, a nie 2

jak to ugryźć?
Crozin
12.03.2011, 20:33:52
Kodu nawet nie analizuję, ale skoro Twierdzisz, że problem jest z łączeniem jako tekst, zamiast dodawaniem to parseInt rozwiąże problem - pokaż jak próbowałeś.

JS nie jest językiem silnie typowanym, tak więc 1, 1.0 czy "1" w większości przypadków oznacza dokładnie to samo. Jednakże, w rzeczywistości jest to zupełnie co innego (pierwsze to liczba całkowita, drugie to liczba zmiennoprzecinkowa, trzecie to tekst). parseInt pozwala Ci na uzyskanie pierwszej formy z tej ostatniej.

Tu wychodzi problem z operatorem +. W JS jest on przeciążony (w zależności od operandów ma różne znaczenie) i tak w przypadku, gdy jeden z operandów jest tekstem oznacza on łączenie tekstu ("23" + 56 = "2356") w przeciwnym wypadku jest to normalny operator dodawania (2 + 54.33 = 56.33).
daniofantasy
12.03.2011, 21:31:13
Generalnie w tej chwili mam coś takiego:

[PHP] pobierz, plaintext 
  1. var ImgFader = function(FadeDelay,TimeDelay,x,aImages1,aImages2,aImages3,DOMElement,FirstTimeStart) {
  2.  
  3. 		var FirstFader = $(DOMElement[0]); 
  4. 		var SecondFader = $(DOMElement[1]);
  5. 		var ThirdFader = $(DOMElement[2]);
  6.  
  7. 		if (parseInt(x)==4) {
  8. 			var x=1;
  9. 		}
  10.  
  11. 		FirstFader.hover(function() {
  12. 			if (parseInt(x)==2)
  13. 				$('.Cloud1_1').fadeIn('50');
  14. 			if (parseInt(x)==3)
  15. 				$('.Cloud1_2').fadeIn('50');
  16. 			if (parseInt(x)==1)
  17. 				$('.Cloud1_3').fadeIn('50');
  18. 		},function() {
  19. 			if (parseInt(x)==2)
  20. 			$('.Cloud1_1').fadeOut('50');
  21. 			if (parseInt(x)==3)
  22. 			$('.Cloud1_2').fadeOut('50');
  23. 			if (parseInt(x)==1)
  24. 			$('.Cloud1_3').fadeOut('50');
  25. 		});
  26.  
  27.  
  28. 		$('#fadingBox').append('<br>');
  29. 		$('#fadingBox').append(x);
  30. 		$('#fadingBox').append('<hr>');
  31.  
  32. 		var OldTimeDelay = TimeDelay;
  33.  
  34. 		if (FirstTimeStart) {
  35. 			TimeDelay = 0;
  36. 		}
  37.  
  38. 		if (x != 0) {
  39. 			setTimeout(function() {
  40. 				FirstFader.fadeOut(FadeDelay);
  41. 					SecondFader.fadeOut(FadeDelay);
  42. 				ThirdFader.fadeOut(FadeDelay);	
  43. 				setTimeout(function() {
  44. 					FirstFader.css('background','url('+aImages1[x-2]+')');
  45. 					SecondFader.css('background','url('+aImages2[x-2]+')');
  46. 					ThirdFader.css('background','url('+aImages3[x-2]+')');									
  47. 				}, FadeDelay);	
  48.  
  49. 				FirstFader.fadeIn(FadeDelay);
  50. 				SecondFader.fadeIn(FadeDelay);
  51. 				ThirdFader.fadeIn(FadeDelay);
  52. 				x = x + 1;
  53. 				ImgFader(FadeDelay,OldTimeDelay,parseInt(x),aImages1,aImages2,aImages3,DOMElement,false);
  54. 			}, TimeDelay);
  55. 		} else {
  56. 			x = x + 1;
  57. 			ImgFader(FadeDelay,OldTimeDelay,parseInt(x),aImages1,aImages2,aImages3,DOMElement,false);
  58. 		}
  59. };
  60.  
  61. $(document).ready( function (){
  62. 	var images1 = new Array('images/Img1_1.jpg','images/Img2_1.jpg','images/Img3_1.jpg')
  63. 	var images2 = new Array('images/Img1_2.jpg','images/Img2_2.jpg','images/Img3_2.jpg')
  64. 	var images3 = new Array('images/Img1_3.jpg','images/Img2_3.jpg','images/Img3_3.jpg')
  65. 	var DOMElements = new Array('#Fader1','#Fader2','#Fader3');
  66. 	ImgFader(500,5000,1,images1,images2,images3,DOMElements,true);
  67. });
[PHP] pobierz, plaintext


i parse int przy rekurencyjnym wywołaniu funkcji dał radę, bo jak wywołam na samym początku funkcji alert(x); to mam ładnie wyświetlone x, bez ciągu - i byłoby już dobrze, ale jeszcze pozostaje mi ten kawałek kodu:

[PHP] pobierz, plaintext 
  1. 		FirstFader.hover(function() {
  2. 			if (parseInt(x)==2)
  3. 				$('.Cloud1_1').fadeIn('50');
  4. 			if (parseInt(x)==3)
  5. 				$('.Cloud1_2').fadeIn('50');
  6. 			if (parseInt(x)==1)
  7. 				$('.Cloud1_3').fadeIn('50');
  8. 		},function() {
  9. 			if (parseInt(x)==2)
  10. 			$('.Cloud1_1').fadeOut('50');
  11. 			if (parseInt(x)==3)
  12. 			$('.Cloud1_2').fadeOut('50');
  13. 			if (parseInt(x)==1)
  14. 			$('.Cloud1_3').fadeOut('50');
  15. 		});
[PHP] pobierz, plaintext


gdzie próbuję przyrównać x do wartości liczbowych i przy pierwszych trzech rekurencjach jest ok (ten kod kręci się w kółko do trzech razy i powrót - znowu od początku) a przy czwartej rekurencji, gdy zaczyna liczyć od nowa te wszystkie ify przestają działać i wyświetlają całość tak, jakby x było zawsze równe 3, mimo że alert(x) pokazuje różne wartości - o co tutaj znowu chodzi? Już nawet dałem parseInt - ale czy jest parseInt, czy go nie ma, to i tak nie robi różnicy - działa do 3 rekurencji - potem lipa... :/

żeby bardziej było widać, o co tutaj chodzi, przesyłam link do tego cudnego dzieła:

http://prawne.home.pl/pieter/

te pojawiające się pod faderem liczby, to jest aktualna wartość x, wywoływana przez ten kod:

$('#fadingBox').append('<br>');
$('#fadingBox').append(x);
$('#fadingBox').append('<hr>');



A te czerwone chmurki mają się pojawiać w kolejności: Cloud1_1, potem Cloud1_2, potem Cloud1_3 i z powrotem - 1_1,1_2,1_3 itd, a staje mi na Cloud 1_2 przez problem z przyrównaniem do wartości w tych if-ach po czwartej rekurencji
zegarek84
12.03.2011, 22:58:33
javascript jest jednym z fajniejszych jezyków gdy się zrozumie podstawy - czyli czysty js, jego obiektowość, dziedziczenie [akurat tu obiektowość nie jest potrzebna] a przede wszystkim zasięg zmiennych - bodajże po angielsku to są clousures [domknięcia czy jakoś tak - może pomyliłem teraz pojecia - nie wiem po co ta przedmowa ;p]

wszystkie zmienne deklarowane jako argument funkcji są zmiennymi prywatnymi lokalnymi/prywatnymi tej funkcji - więc tak jakbyś przed nimi dopisał także var - a więc w rekurencji zatracasz zasięg do zmiennej będącej na zewnątrz... i jeszcze jedna kwestia - nie wiem dokładnie jak to jest rozwiązane w jquery ale chyba a raczej na 99% podpiołeś wiele funkcji pod hover - za każdym razem przy rekurencji - a widzisz oczywiście raczej ostatni efekt choć zapewne każda z nich się wykona - calego kodu nie chce mi się analizować i skrót dlaczego masz wartość x===3 w pewnym zauważalnym dla Ciebie miejscu...

gdy zagłębiasz się poraz n-ty w funkcję w pewnym momencie jak sam chciałeś przyblokować masz wartość === 4 - idąc dalej od razu zamieniasz na 1 i dalej co będę pisał to ważne, cobyś poczytał o zasięgu zmiennych w javascript

Kod
        if (parseInt(x)==4) {
            var x=1;
        }

podpinasz dalej hover - gdzie ze względu na to jaki jest zasięg zmiennych w javascript zmienna x w funkcjach w hoverze jest przekazana w zasadzie przez referencję [nie dosłownie ale to najlepiej obrazuje tutaj zasięg - jeśli nie ma zmiennej lokalnej jest ona szukana poziom wyżej aż do obiektu window....]

niżej masz takie fragmenty jak:
x = x + 1; - gdzie x===2 - wchodząc do funkcji i robiąc obieg dla 2 hovera masz ustawionego na 3, jeśli x będzie 3 co przejdzie w ifie to hovera masz na 4, jeśli x masz na 1 to hovera masz na 2 - więc widzieć możesz hovera na 2 i na 3

zwróć uwagę ile aż razy Ci mrugnie ta chmurka u Ciebie ;]
daniofantasy
15.03.2011, 22:24:37
Witam, przeorganizowałem trochę kod - idąc na około i eliminując problem ze zliczaniem x-ów, obecnie wygląda to tak:

[PHP] pobierz, plaintext 
  1. var ImgFader = function(FadeDelay,TimeDelay,x,aImages1,aImages2,aImages3,DOMElement,FirstTimeStart) {
  2.  
  3. 		var FirstFader = $(DOMElement[0]); 
  4. 		var SecondFader = $(DOMElement[1]);
  5. 		var ThirdFader = $(DOMElement[2]);
  6.  
  7. 		var OldTimeDelay = TimeDelay;
  8.  
  9. 		if (FirstTimeStart && parseInt(x) == 1) {
  10. 			//TimeDelay = 0;
  11. 		}
  12.  
  13. 		var Fade1 = false;
  14. 		var Fade2 = false;
  15. 		var Fade3 = false;
  16.  
  17. 		if (x==1) {
  18.  
  19. 			setTimeout(function() {
  20.  
  21. 				FirstFader.hover(function() {
  22. 					$('.Cloud1_1').fadeIn('50');
  23. 					Fade1 = true;
  24. 				},function() {
  25. 					Fade1 = false;
  26. 					$('.Cloud1_1').fadeOut('50');
  27. 				});
  28.  
  29. 				FirstFader.fadeOut(FadeDelay);
  30. 				SecondFader.fadeOut(FadeDelay);
  31. 				ThirdFader.fadeOut(FadeDelay);	
  32. 				setTimeout(function() {
  33.  
  34. 					FirstFader.css('background','url('+aImages1[0]+')');
  35. 					SecondFader.css('background','url('+aImages2[0]+')');
  36. 					ThirdFader.css('background','url('+aImages3[0]+')');									
  37. 				}, FadeDelay);
  38. 				FirstFader.fadeIn(FadeDelay);
  39. 				SecondFader.fadeIn(FadeDelay);
  40. 				ThirdFader.fadeIn(FadeDelay);
  41.  
  42. 				if (parseInt(x)==3) {
  43. 					x = 0;
  44. 				}
  45.  
  46. 				if (Fade1 == false && Fade2 == false && Fade3 == false) {
  47. 					$('.Cloud1_1').fadeOut('0');
  48. 					$('.Cloud1_2').fadeOut('0');
  49. 					$('.Cloud1_3').fadeOut('0');
  50. 				}
  51.  
  52. 				x = x + 1;
  53. 				ImgFader(FadeDelay,TimeDelay,parseInt(x),aImages1,aImages2,aImages3,DOMElement,false);
  54. 			}, TimeDelay);
  55. 		}				
  56.  
  57. 		if (x==2) {
  58. 			setTimeout(function() {
  59. 				FirstFader.hover(function() {
  60. 					Fade2 = true;
  61. 					$('.Cloud1_2').fadeIn('50');
  62. 				},function() {
  63. 					Fade2 = false;
  64. 					$('.Cloud1_2').fadeOut('50');
  65. 				});
  66.  
  67. 				FirstFader.fadeOut(FadeDelay);
  68. 				SecondFader.fadeOut(FadeDelay);
  69. 				ThirdFader.fadeOut(FadeDelay);	
  70. 				setTimeout(function() {
  71.  
  72. 					FirstFader.css('background','url('+aImages1[1]+')');
  73. 					SecondFader.css('background','url('+aImages2[1]+')');
  74. 					ThirdFader.css('background','url('+aImages3[1]+')');									
  75. 				}, FadeDelay);
  76. 				FirstFader.fadeIn(FadeDelay);
  77. 				SecondFader.fadeIn(FadeDelay);
  78. 				ThirdFader.fadeIn(FadeDelay);
  79.  
  80. 				if (parseInt(x)==3) {
  81. 					x = 0;
  82. 				}
  83.  
  84. 				if (Fade1 == false && Fade2 == false && Fade3 == false) {
  85. 					$('.Cloud1_1').fadeOut('0');
  86. 					$('.Cloud1_2').fadeOut('0');
  87. 					$('.Cloud1_3').fadeOut('0');
  88. 					clearTimeout() 
  89. 				}
  90.  
  91. 				x = x + 1;
  92. 				ImgFader(FadeDelay,TimeDelay,parseInt(x),aImages1,aImages2,aImages3,DOMElement,false);
  93. 			}, TimeDelay);		
  94. 		}
  95.  
  96. 		if (x==3) {
  97. 			setTimeout(function() {
  98.  
  99. 				FirstFader.hover(function() {
  100. 					Fade3 = true;
  101. 					$('.Cloud1_3').fadeIn('50');
  102. 				},function() {
  103. 					Fade3 = false;
  104. 					$('.Cloud1_3').fadeOut('50');
  105. 					clearTimeout() 
  106. 				});
  107.  
  108. 				FirstFader.fadeOut(FadeDelay);
  109. 				SecondFader.fadeOut(FadeDelay);
  110. 				ThirdFader.fadeOut(FadeDelay);	
  111. 				setTimeout(function() {
  112.  
  113. 					FirstFader.css('background','url('+aImages1[2]+')');
  114. 					SecondFader.css('background','url('+aImages2[2]+')');
  115. 					ThirdFader.css('background','url('+aImages3[2]+')');									
  116. 				}, FadeDelay);
  117. 				FirstFader.fadeIn(FadeDelay);
  118. 				SecondFader.fadeIn(FadeDelay);
  119. 				ThirdFader.fadeIn(FadeDelay);
  120.  
  121. 				if (parseInt(x)==3) {
  122. 					x = 0;
  123. 				}
  124.  
  125. 				if (Fade1 == false && Fade2 == false && Fade3 == false) {
  126. 					$('.Cloud1_1').fadeOut('0');
  127. 					$('.Cloud1_2').fadeOut('0');
  128. 					$('.Cloud1_3').fadeOut('0');
  129. 					clearTimeout() 
  130. 				}
  131.  
  132. 				x = x + 1;
  133. 				ImgFader(FadeDelay,TimeDelay,parseInt(x),aImages1,aImages2,aImages3,DOMElement,false);
  134. 			}, TimeDelay);						
  135. 		}
  136. };
  137.  
  138. $(document).ready( function (){
  139. 	var images1 = new Array('images/Img1_1.jpg','images/Img2_1.jpg','images/Img3_1.jpg')
  140. 	var images2 = new Array('images/Img1_2.jpg','images/Img2_2.jpg','images/Img3_2.jpg')
  141. 	var images3 = new Array('images/Img1_3.jpg','images/Img2_3.jpg','images/Img3_3.jpg')
  142. 	var DOMElements = new Array('#Fader1','#Fader2','#Fader3');
  143. 	ImgFader(500,5000,1,images1,images2,images3,DOMElements,true);
  144. });
[PHP] pobierz, plaintext


I już było by ok, ale mam jeszcze problem z hoverem - bo przy pierwszych trzech rekurencjach wszystko jest ok i kod działa poprawnie - natomiast przy czwartej rekurencji, gdy x się zeruje i hover ma ponownie wyświetlić chmurkę 1_1, wyświetla mi chmurkę 1_3 z 3 rekurencji, gdzie x jest równe 3 - jak wyhashuję z kodu hovery i zostają same fady, to wszystko działa w 100% poprawnie - czyli zliczanie x-ów i wszystkie warunki są w porządku - wszystkie fady i cała reszta też działa (sprawdzałem też wcześniej wartości x-ów itd i wszystko w porządku - kod się nie zapętla, wykonuje się trzy razy i wraca - bez pustych przebiegów). Jedynie hovery straszą - i właśnie nie wiem o co tutaj chodzi - czy to jest jakieś cachowanie hovera z jQuery? Czy trzeba go jakoś zewnętrznie wyzerować, żeby mógł z powrotem przyjąć pierwotną wartość z pierwszej rekurencji?

Całość do podejrzenia tutaj (trzeba poczekać 5s na pierwszego fada):

prawne.home.pl/pieter

Konkretnie chodzi o ten kawałek kodu:

[PHP] pobierz, plaintext 
  1. 				FirstFader.hover(function() {
  2. 					$('.Cloud1_1').fadeIn('50');
  3. 				},function() {
  4. 					$('.Cloud1_1').fadeOut('50');
  5. 				});
[PHP] pobierz, plaintext

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.