ugrás a tartalomhoz

JavaScript setTimout és setInterval objektumait el lehet programból indítani?

Mistic97 · 2015. Júl. 22. (Sze), 16.46
Egy egyszerű "játékot" készítek, ahol 3 négyzet folyamatosan változtatja a helyzetét a képernyőn (jobbra haladnak egy kis CSS használatával). Egy setTimeout objektum segítségével elindítom a next() metódust, melyben ismét meghívja magát a függvény, ugyanúgy egy setTimeout objektummal. Ezzel a négyzetek mozgását hoztam létre.

Azonban, azt szeretném elérni, hogy egy gombra kattintva a számlálás leálljon. Olvasgattam, és rátaláltam a clearTimeout objektumra, de kétségtelenül nem működik valami a kódomban, hiszen nem reagál semmire.

Ami egy másik baj, hogy a setTimeout objektumot is elindítanám kattintásra, de az sem működik, miért?

A kód és a képfájlok letöltése itt lehetséges (ha ki akarod próbálni): https://app.box.com/s/p3qth4seozzty0y4x5hc1egrfhifal87

A teljes kód:
<!DOCTYPE HTML>

<html>
	<head>
		<title>JavaScript 24 óra alatt</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"></meta>
	</head>
	<body>
		<h1>Animation with Dynamic HTML</h1>
		<hr/>
		<p id="kep1" style="position: absolute; left: 0px; top: 100px; width: 100px; height: 100px; visibility: show;" onMouseDown="kattintas('kep1'); window.setTimeout('visszaallit(1)', 2000); win();">
			<img src="kep5.jpg" width="100" height="100" border="0">
		</p>
		<p id="kep2" style="position: absolute; left: 0px; top: 250px; width: 100px; height: 100px; visibility: show;" onMouseDown="kattintas('kep2'); window.setTimeout('visszaallit(2)', 2000); win();">
			<img src="kep5.jpg" width="100" height="100" border="0">
		</p>
		<p id="kep3" style="position: absolute; left: 0px; top: 400px; width: 100px; height: 100px; visibility: show;" onMouseDown="kattintas('kep3'); window.setTimeout('visszaallit(3)', 2000); win();">
			<img src="kep5.jpg" width="100" height="100" border="0">
		</p>
		<script>
				var pos1	= -95;
				var pos2	= -95;
				var pos3	= -95;
				var speed1	= Math.floor(Math.random()*10)+2;
				var speed2	= Math.floor(Math.random()*10)+2;
				var speed3	= Math.floor(Math.random()*10)+2;
				function next(){
					pos1	+= speed1;
					pos2	+= speed2;
					pos3	+= speed3;
					if(pos1 > 1024) pos1 = -95;
					if(pos2 > 1024) pos2 = -95;
					if(pos3 > 1024) pos3 = -95;
					document.getElementById("kep1").style.left = pos1 + "px";
					document.getElementById("kep2").style.left = pos2 + "px";
					document.getElementById("kep3").style.left = pos3 + "px";
					ido = setTimeout(function(){next();}, 20);
				}
				next();
				function kattintas(s){
					document.getElementById(s).style.border = "2px solid blue";
				}
				function win(){
					if((document.getElementById("kep1").style.border == "2px solid blue") && (document.getElementById("kep2").style.border == "2px solid blue") && (document.getElementById("kep3").style.border == "2px solid blue")){
						alert("Megnyerted a játékot!");
					}
				}
				function visszaallit(s){
					document.getElementById("kep" + s).style.border = "none";
				}
		</script>
		<div style="position: absolute; top: 500px;">
			<hr/>
			<p>A játék megnyeréséhez kattints időben az összes négyzetre, hogy kék keret legyen körülötte!</p>
		</div>
		<div style="position: absolute; top: 550px;">
			<hr/>
			<p>Válassz nehézségi szintet!</p>
			<form name="nehezseg">
				<button id="konnyu" onclick="clearTimeout(ido);">Könnyű</button>
				<button id="normal" onclick="clearTimeout(ido);">Normál</button>
				<button id="nehez" onclick="clearTimeout(ido);">Nehéz</button>
			</form>
		</div>
	</body>
</html>
 
2

megáll, majd újratöltödik

T.G · 2015. Júl. 22. (Sze), 17.18
Egy űrlap submit gombjára tetted rá az eseményt, így a jelenség a következő: az utasítás lefut, majd azon nyomban az űrlap elküldésre kerül, azaz az oldal újratöltődik.
Ha törlöd az űrlapot, vagy a kattintást eseményt javítod az alábbiak szerint, akkor utána már megszűnik az újratöltés.
onclick="clearTimeout(ido);return false;"
3

Nagyon szépen köszönöm,

Mistic97 · 2015. Júl. 22. (Sze), 17.29
Nagyon szépen köszönöm, nagyon hasznos a cikked, mielőtt a második válasz megérkezett én is rájöttem, hogy hol a hiba. Gyanús volt nekem, hogy a console.log üzenete 1 pillanatra megjelenik majd eltűnik, és rákerestem a button HTML elemre:

Note: If you use the <button> element in an HTML form, different browsers may submit different values. Use <input> to create buttons in an HTML form.

Az ilyeneket miért nem tüntetik fel jobban? :(
4

button

_subi_ · 2015. Júl. 23. (Cs), 07.12
Ha megnézed, elég sok komolyabb oldal használ button elemet (most nem írok listát). Tudtommal ez IE probléma volt, mégpedig a rettegett 6-os verzióig.
5

Én inkább a buttont javaslom,

bamegakapa · 2015. Júl. 23. (Cs), 08.25
Én inkább a buttont javaslom, további elemeket rakhatsz bele, sokkal rugalmasabb. Csak mindig állítsd be rajta a type attribútumot és nem lesz gond.

Referenciaként az mdn-t javaslom.