ugrás a tartalomhoz

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

Mistic97 · 2015. Júl. 22. (Sze), 17.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:
  1. <!DOCTYPE HTML>  
  2.   
  3. <html>  
  4.     <head>  
  5.         <title>JavaScript 24 óra alatt</title>  
  6.         <meta http-equiv="content-type" content="text/html; charset=UTF-8"></meta>  
  7.     </head>  
  8.     <body>  
  9.         <h1>Animation with Dynamic HTML</h1>  
  10.         <hr/>  
  11.         <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();">  
  12.             <img src="kep5.jpg" width="100" height="100" border="0">  
  13.         </p>  
  14.         <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();">  
  15.             <img src="kep5.jpg" width="100" height="100" border="0">  
  16.         </p>  
  17.         <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();">  
  18.             <img src="kep5.jpg" width="100" height="100" border="0">  
  19.         </p>  
  20.         <script>  
  21.                 var pos1    = -95;  
  22.                 var pos2    = -95;  
  23.                 var pos3    = -95;  
  24.                 var speed1  = Math.floor(Math.random()*10)+2;  
  25.                 var speed2  = Math.floor(Math.random()*10)+2;  
  26.                 var speed3  = Math.floor(Math.random()*10)+2;  
  27.                 function next(){  
  28.                     pos1    += speed1;  
  29.                     pos2    += speed2;  
  30.                     pos3    += speed3;  
  31.                     if(pos1 > 1024) pos1 = -95;  
  32.                     if(pos2 > 1024) pos2 = -95;  
  33.                     if(pos3 > 1024) pos3 = -95;  
  34.                     document.getElementById("kep1").style.left = pos1 + "px";  
  35.                     document.getElementById("kep2").style.left = pos2 + "px";  
  36.                     document.getElementById("kep3").style.left = pos3 + "px";  
  37.                     ido = setTimeout(function(){next();}, 20);  
  38.                 }  
  39.                 next();  
  40.                 function kattintas(s){  
  41.                     document.getElementById(s).style.border = "2px solid blue";  
  42.                 }  
  43.                 function win(){  
  44.                     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")){  
  45.                         alert("Megnyerted a játékot!");  
  46.                     }  
  47.                 }  
  48.                 function visszaallit(s){  
  49.                     document.getElementById("kep" + s).style.border = "none";  
  50.                 }  
  51.         </script>  
  52.         <div style="position: absolute; top: 500px;">  
  53.             <hr/>  
  54.             <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>  
  55.         </div>  
  56.         <div style="position: absolute; top: 550px;">  
  57.             <hr/>  
  58.             <p>Válassz nehézségi szintet!</p>  
  59.             <form name="nehezseg">  
  60.                 <button id="konnyu" onclick="clearTimeout(ido);">Könnyű</button>  
  61.                 <button id="normal" onclick="clearTimeout(ido);">Normál</button>  
  62.                 <button id="nehez" onclick="clearTimeout(ido);">Nehéz</button>  
  63.             </form>  
  64.         </div>  
  65.     </body>  
  66. </html>  
‹ Adatok küldése AJAX és PHP nélkül lehetséges? Node.js aktuális pozícó fájlban, írás adott pozícióba ›
 ■
1

Hibakeresés

Hidvégi Gábor · 2015. Júl. 22. (Sze), 18.07
Ajánlom figyelmedbe az Egyszerű hibakeresés című cikket.
2

megáll, majd újratöltödik

T.G · 2015. Júl. 22. (Sze), 18.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.
  1. onclick="clearTimeout(ido);return false;"  
3

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

Mistic97 · 2015. Júl. 22. (Sze), 18.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), 08.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), 09.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.