js, rekurencje, liczenie pomocy! Opcje

[daniofantasy]

Witam,

Mam takie cudo:

[PHP] pobierz, plaintext 
var ImgFader = function(FadeDelay,TimeDelay,x,aImages1,aImages2,aImages3,DOMElement,FirstTimeStart) {
 
		var FirstFader = $(DOMElement[0]); 
		var SecondFader = $(DOMElement[1]);
		var ThirdFader = $(DOMElement[2]);
 
		if (x==4) {
			x=1;
		}
 
		var OldTimeDelay = TimeDelay;
 
		if (FirstTimeStart) {
			TimeDelay = 0;
		}
 
		setTimeout(function() {
			FirstFader.fadeOut(FadeDelay);
			SecondFader.fadeOut(FadeDelay);
			ThirdFader.fadeOut(FadeDelay);	
			setTimeout(function() {
				FirstFader.css('background','url('+aImages1[x-2]+')');
				SecondFader.css('background','url('+aImages2[x-2]+')');
				ThirdFader.css('background','url('+aImages3[x-2]+')');									
			}, FadeDelay);
 
			FirstFader.fadeIn(FadeDelay);
			SecondFader.fadeIn(FadeDelay);
			ThirdFader.fadeIn(FadeDelay);
			x++;
			ImgFader(FadeDelay,OldTimeDelay,x,aImages1,aImages2,aImages3,DOMElement,false);
		}, TimeDelay);
};
 
$(document).ready( function (){
	var images1 = new Array('images/Img1_1.jpg','images/Img2_1.jpg','images/Img3_1.jpg')
	var images2 = new Array('images/Img1_2.jpg','images/Img2_2.jpg','images/Img3_2.jpg')
	var images3 = new Array('images/Img1_3.jpg','images/Img2_3.jpg','images/Img3_3.jpg')
	var DOMElements = new Array('#Fader1','#Fader2','#Fader3');
	ImgFader(500,5000,1,images1,images2,images3,DOMElements,true);
});
[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ę

[kamil4u]

Dodawanie w JS jest trochę ułomne
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

[daniofantasy]

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]

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]

Generalnie w tej chwili mam coś takiego:

[PHP] pobierz, plaintext 
var ImgFader = function(FadeDelay,TimeDelay,x,aImages1,aImages2,aImages3,DOMElement,FirstTimeStart) {
 
		var FirstFader = $(DOMElement[0]); 
		var SecondFader = $(DOMElement[1]);
		var ThirdFader = $(DOMElement[2]);
 
		if (parseInt(x)==4) {
			var x=1;
		}
 
		FirstFader.hover(function() {
			if (parseInt(x)==2)
				$('.Cloud1_1').fadeIn('50');
			if (parseInt(x)==3)
				$('.Cloud1_2').fadeIn('50');
			if (parseInt(x)==1)
				$('.Cloud1_3').fadeIn('50');
		},function() {
			if (parseInt(x)==2)
			$('.Cloud1_1').fadeOut('50');
			if (parseInt(x)==3)
			$('.Cloud1_2').fadeOut('50');
			if (parseInt(x)==1)
			$('.Cloud1_3').fadeOut('50');
		});
 
 
		$('#fadingBox').append('<br>');
		$('#fadingBox').append(x);
		$('#fadingBox').append('<hr>');
 
		var OldTimeDelay = TimeDelay;
 
		if (FirstTimeStart) {
			TimeDelay = 0;
		}
 
		if (x != 0) {
			setTimeout(function() {
				FirstFader.fadeOut(FadeDelay);
					SecondFader.fadeOut(FadeDelay);
				ThirdFader.fadeOut(FadeDelay);	
				setTimeout(function() {
					FirstFader.css('background','url('+aImages1[x-2]+')');
					SecondFader.css('background','url('+aImages2[x-2]+')');
					ThirdFader.css('background','url('+aImages3[x-2]+')');									
				}, FadeDelay);	
 
				FirstFader.fadeIn(FadeDelay);
				SecondFader.fadeIn(FadeDelay);
				ThirdFader.fadeIn(FadeDelay);
				x = x + 1;
				ImgFader(FadeDelay,OldTimeDelay,parseInt(x),aImages1,aImages2,aImages3,DOMElement,false);
			}, TimeDelay);
		} else {
			x = x + 1;
			ImgFader(FadeDelay,OldTimeDelay,parseInt(x),aImages1,aImages2,aImages3,DOMElement,false);
		}
};
 
$(document).ready( function (){
	var images1 = new Array('images/Img1_1.jpg','images/Img2_1.jpg','images/Img3_1.jpg')
	var images2 = new Array('images/Img1_2.jpg','images/Img2_2.jpg','images/Img3_2.jpg')
	var images3 = new Array('images/Img1_3.jpg','images/Img2_3.jpg','images/Img3_3.jpg')
	var DOMElements = new Array('#Fader1','#Fader2','#Fader3');
	ImgFader(500,5000,1,images1,images2,images3,DOMElements,true);
});
[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 
		FirstFader.hover(function() {
			if (parseInt(x)==2)
				$('.Cloud1_1').fadeIn('50');
			if (parseInt(x)==3)
				$('.Cloud1_2').fadeIn('50');
			if (parseInt(x)==1)
				$('.Cloud1_3').fadeIn('50');
		},function() {
			if (parseInt(x)==2)
			$('.Cloud1_1').fadeOut('50');
			if (parseInt(x)==3)
			$('.Cloud1_2').fadeOut('50');
			if (parseInt(x)==1)
			$('.Cloud1_3').fadeOut('50');
		});
[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]

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]

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 
var ImgFader = function(FadeDelay,TimeDelay,x,aImages1,aImages2,aImages3,DOMElement,FirstTimeStart) {
 
		var FirstFader = $(DOMElement[0]); 
		var SecondFader = $(DOMElement[1]);
		var ThirdFader = $(DOMElement[2]);
 
		var OldTimeDelay = TimeDelay;
 
		if (FirstTimeStart && parseInt(x) == 1) {
			//TimeDelay = 0;
		}
 
		var Fade1 = false;
		var Fade2 = false;
		var Fade3 = false;
 
		if (x==1) {
 
			setTimeout(function() {
 
				FirstFader.hover(function() {
					$('.Cloud1_1').fadeIn('50');
					Fade1 = true;
				},function() {
					Fade1 = false;
					$('.Cloud1_1').fadeOut('50');
				});
 
				FirstFader.fadeOut(FadeDelay);
				SecondFader.fadeOut(FadeDelay);
				ThirdFader.fadeOut(FadeDelay);	
				setTimeout(function() {
 
					FirstFader.css('background','url('+aImages1[0]+')');
					SecondFader.css('background','url('+aImages2[0]+')');
					ThirdFader.css('background','url('+aImages3[0]+')');									
				}, FadeDelay);
				FirstFader.fadeIn(FadeDelay);
				SecondFader.fadeIn(FadeDelay);
				ThirdFader.fadeIn(FadeDelay);
 
				if (parseInt(x)==3) {
					x = 0;
				}
 
				if (Fade1 == false && Fade2 == false && Fade3 == false) {
					$('.Cloud1_1').fadeOut('0');
					$('.Cloud1_2').fadeOut('0');
					$('.Cloud1_3').fadeOut('0');
				}
 
				x = x + 1;
				ImgFader(FadeDelay,TimeDelay,parseInt(x),aImages1,aImages2,aImages3,DOMElement,false);
			}, TimeDelay);
		}				
 
		if (x==2) {
			setTimeout(function() {
				FirstFader.hover(function() {
					Fade2 = true;
					$('.Cloud1_2').fadeIn('50');
				},function() {
					Fade2 = false;
					$('.Cloud1_2').fadeOut('50');
				});
 
				FirstFader.fadeOut(FadeDelay);
				SecondFader.fadeOut(FadeDelay);
				ThirdFader.fadeOut(FadeDelay);	
				setTimeout(function() {
 
					FirstFader.css('background','url('+aImages1[1]+')');
					SecondFader.css('background','url('+aImages2[1]+')');
					ThirdFader.css('background','url('+aImages3[1]+')');									
				}, FadeDelay);
				FirstFader.fadeIn(FadeDelay);
				SecondFader.fadeIn(FadeDelay);
				ThirdFader.fadeIn(FadeDelay);
 
				if (parseInt(x)==3) {
					x = 0;
				}
 
				if (Fade1 == false && Fade2 == false && Fade3 == false) {
					$('.Cloud1_1').fadeOut('0');
					$('.Cloud1_2').fadeOut('0');
					$('.Cloud1_3').fadeOut('0');
					clearTimeout() 
				}
 
				x = x + 1;
				ImgFader(FadeDelay,TimeDelay,parseInt(x),aImages1,aImages2,aImages3,DOMElement,false);
			}, TimeDelay);		
		}
 
		if (x==3) {
			setTimeout(function() {
 
				FirstFader.hover(function() {
					Fade3 = true;
					$('.Cloud1_3').fadeIn('50');
				},function() {
					Fade3 = false;
					$('.Cloud1_3').fadeOut('50');
					clearTimeout() 
				});
 
				FirstFader.fadeOut(FadeDelay);
				SecondFader.fadeOut(FadeDelay);
				ThirdFader.fadeOut(FadeDelay);	
				setTimeout(function() {
 
					FirstFader.css('background','url('+aImages1[2]+')');
					SecondFader.css('background','url('+aImages2[2]+')');
					ThirdFader.css('background','url('+aImages3[2]+')');									
				}, FadeDelay);
				FirstFader.fadeIn(FadeDelay);
				SecondFader.fadeIn(FadeDelay);
				ThirdFader.fadeIn(FadeDelay);
 
				if (parseInt(x)==3) {
					x = 0;
				}
 
				if (Fade1 == false && Fade2 == false && Fade3 == false) {
					$('.Cloud1_1').fadeOut('0');
					$('.Cloud1_2').fadeOut('0');
					$('.Cloud1_3').fadeOut('0');
					clearTimeout() 
				}
 
				x = x + 1;
				ImgFader(FadeDelay,TimeDelay,parseInt(x),aImages1,aImages2,aImages3,DOMElement,false);
			}, TimeDelay);						
		}
};
 
$(document).ready( function (){
	var images1 = new Array('images/Img1_1.jpg','images/Img2_1.jpg','images/Img3_1.jpg')
	var images2 = new Array('images/Img1_2.jpg','images/Img2_2.jpg','images/Img3_2.jpg')
	var images3 = new Array('images/Img1_3.jpg','images/Img2_3.jpg','images/Img3_3.jpg')
	var DOMElements = new Array('#Fader1','#Fader2','#Fader3');
	ImgFader(500,5000,1,images1,images2,images3,DOMElements,true);
});
[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 
				FirstFader.hover(function() {
					$('.Cloud1_1').fadeIn('50');
				},function() {
					$('.Cloud1_1').fadeOut('50');
				});
[PHP] pobierz, plaintext