Jak poprawić slider z odcinka 2 JS

pytanie zadane 29 sierpnia 2016 w JavaScript przez dartespl Użytkownik (830 p.)

Witam was serdecznie :P
Jestem początkujący w programowaniu w JS i chciałbym wiedzieć, jak można poprawić slider z 2 odcinku JS u pana Mirosława. Na końcu odcinku powiedział, że slider nie jest idealny. Zauważyłem, że jak klikam bardzo szybko na te numerki, to slider "szaleje", czyli bardzo szybko zmienia slajdy.

Pomyślałem, że można podczas FadeIn i FadeOut uniemożliwić zmianę slajdu. Poklepałem w klawiaturę, pomyślałem, ale dalej nie działa, dlatego proszę was na forum o pomoc. Jestem totalnym newbie w JS, więc proszę o wyrozumiałość :P Poniżej macie kod, który mi nie działa.

<!DOCTYPE html>
<html lang="pl">
<html>
	<head>
		<meta charset="utf-8" />
		
		<style>
			body
			{
				background-color: #222222;
				font-size: 24px;
				color: white;
			}
		</style>
		
		<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
		
		<script type="text/javascript">
		
			var numer = Math.floor(Math.random()*5)+1;
			
			var timer1 = 0;
			var timer2 = 0;
			var sprawdz=true;
			
			function zmiana()
			{
				sprawdz=true;
			}
			
			function ustawslajd(nrslajdu)
			{
			if(sprawdz==true)
				{
					clearTimeout(timer1);
					clearTimeout(timer2);
					numer = nrslajdu - 1;
					
					schowaj();
					setTimeout("zmienslajd()", 500);
				}	
			}
			
			function schowaj()
			{
				sprawdz=false; setTimeout("zmiana()", 500);
				$("#slider").fadeOut(500);
			}
		
			function zmienslajd()
			{
				numer++; if (numer>5) numer=1;
				
				var plik = "<img src=\"slajdy/slajd" + numer + ".png\" />";
				
				document.getElementById("slider").innerHTML = plik;
				sprawdz=false; setTimeout("zmiana()", 500);
				$("#slider").fadeIn(500);
				
				timer1 = setTimeout("zmienslajd()", 5000);
				timer2 = setTimeout("schowaj()", 4500);
			
			}
			
		</script>
		
	</head>
	<body onload="zmienslajd()">
	
		<span onclick="ustawslajd(1)" style="cursor:pointer;">[ 1 ]</span>
		<span onclick="ustawslajd(2)" style="cursor:pointer;">[ 2 ]</span>
		<span onclick="ustawslajd(3)" style="cursor:pointer;">[ 3 ]</span>
		<span onclick="ustawslajd(4)" style="cursor:pointer;">[ 4 ]</span>
		<span onclick="ustawslajd(5)" style="cursor:pointer;">[ 5 ]</span>
		
		<div id="slider"></div>
		
	</body>
</html>

komentarz 30 sierpnia 2016 przez EDiox Nowicjusz (100 p.)

Przydało by się chociaż troszkę komentarza, co autor miał na myśli. Po co ten setTimeout w funkcji schowaj() i dodatkowo w zmienslajd(). Ciężko coś poradzić. Czy semafory mają tu sens?