[JavaScript] Problemy z kodem.

Question

Witam, oto mój kod.

Strona wygląda następująco, mam formularz logowania. Wszystkie imputy są jeden pod drugim. Zdarzeniami onkeyup, onblur itd. wywołuję funkcję dymek_on() (ten <div id="dymek"> to po prostu małe okno, które wyświetla się obok z jakąś informacją, ale z tym nie ma problemu. Problem pojawia się gdy któryś z imputów wywołuje funkcję dymek_on(), a później jakiś inny input wywołuje tą samą funkcję. W założeniu funkcja dymek_on powinna rozpoznać że dymek jest wyświetlany (linia 7), wywołać funkcję dymek_off(), a jak już dymek będzie posiadał display: none, wtedy go umieścić na odpowiedniej wysokości, i z powrotem wyświetlić. 

Niestety, zanim funkcja dymek_off() w ciągu tej 1 sekundy zmniejszy opacity do 0 (i włączy display: none), funkcja dymek_on (w linii 10) się już wywołuje. W efekcie widać przeskok dymka, zniknięcie i pojawienie się. W sumie sam nie wiem dlaczego, przecież ta funkcja dymek_on (w linii 10) jest w setTimeout(); z opóźnieniem 3 sekundy.

Linia 15,16,17 odpowiada za odczytanie na jakiej wysokości jest input, i nadanie takiego zamego położenia y dymkowi.

	<script>
	var dymek_aktywny = false;
		  function dymek_on(obiekt)
		  {
				var dymek =  document.getElementById("dymek");
				
				if(dymek_aktywny == true)//sprawdzam czy dymek jest widziany na stronie
				{
					dymek_off();//jeśli tak to wyłącz
					setTimeout(dymek_on(obiekt), 3000);//z 3 sek. opóźnieniem, pokaż go
					exit();
				}
				else
				{
					var poz = findPos(obiekt);
					poz[1] = poz[1]-270;
					dymek.style.top = poz[1]+"px";
					dymek.innerHTML = "informacja";
					dymek_aktywny = true;
					$("#dymek").fadeIn(1000);	
					
				}
		  }
		  function dymek_off()
		  {
				$("#dymek").fadeOut(1000);	
				dymek_aktywny = false;
		  }
	</script>

 

Answer 1

setTimeout(dymek_on(obiekt), 3000);

setTimeout(tutaj_musisz_przekazać_referencję_do_funkcji, 3000);

W Twoim kodzie, zamiast przekazać referencję, wywołujesz tam funkcję.
Użyj jako referencji funkcji anonimowej

setTimeout(function() {
 // kod który ma się wykonać po 3s
}, 3000);

Comments

Działa.. ale jak? dlaczego? odkąd poznałem setTimeout() myślałem że tam nie ma różnicy między funkcją anonimową a jakąś osobną. Wielokrotnie stosowałem np. setTimeout("kolejny_slajd(nr_slajdu)", 5000); i taki slajder działał, dlaczego tu jest inaczej?

---

Do setTimeout przekazuję się referencję funkcji. Wpisując w pierwszy argument nazwę funkcji z nawiasami przekazujesz to,  co ona zwraca.

---

setTimeout("kolejny_slajd(nr_slajdu)", 5000);

Ponieważ przekazywałeś string, co nie jest najlepszą praktyką.

Tutaj znajdziesz dokładniejsze wyjaśnienie -> http://bonsaiden.github.io/JavaScript-Garden/pl/#other.timeouts