SetTimeout

Most egy kis életet viszünk a webes alkalmazásunkba, megmozgatjuk egy kicsit a DOM tagjait.



Biztosan észrevetted már, hogy amikor weboldalakat nézegetsz és átméretezed az ablakot, a tartalom is átrendeződik (átrendeződhet).
A böngésző figyeli a felhasználó által elindított eseményeket, és ennek -- és az új helyzet során előállt egyéb új információknak -- megfelelően frissíti az oldal megjelenítését.

A böngésző azonban ezt a frissítési folyamatot csak akkor végzi el, ha épp nem fut javascript kód. Emiatt van az, hogy hosszas kódfuttatáskor a böngészőlap "befagy". Ilyenkor nem reagál semmire.

Tegyük fel, hogy a képernyőre teszünk egy div elemet (egy konténerbe), aminek a mérete 20x20 pixel, valahogy így:

<div style="{position:absolute;width:300px;height:300px;background:#DDD">
    <div style="position:absolute;width:20px;height:20px;background:#F55;">
        .
    </div>
</div>


Ha most ezt a 20x20-as div elemet (nevezzük labdának) valamilyen pozícióba szeretnénk tenni, akkor a style elemen belül a left (és top) tulajdonságot kellene megadnunk valahogy így:

labda.style.left="10px";

Ha pedig mozgatni szeretnénk, akkor nyilván folyamatosan növelnünk kéne a left tulajdonság pixelértékét, mondjuk egy ciklus segítségével, például:

for (labdax=1;labdax<300;labdax++)
{
  labda.style.left=labdax+"px";
}

A probléma azonban az, hogy amíg a ciklus fut, addig a böngésző nem fogja frissíteni a képet, így csak a ciklus lefutása utáni állapotot fogjuk látni.
Ráadásul a ciklus nagyon gyorsan lefut, tehát két értékadás közt várakoztatni kellene.
A kódot tehát ilyenre kellene kiegészíteni:


for (labdax=1;labdax<300;labdax++)
{
  labda.style.left=labdax+"px";
  document.refresh();
  wait(50);
}
Sok nyelvben ezt így meg is lehet oldani. Ezekben a nyelvekben a wait segítségével azt üzenjük az operációs rendszernek, hogy 50 ezredmásodperc időre függessze fel a programszálunk futását, foglalkozzon mással a processzor (mondjuk vizsgálja meg, hogy kattintott-e valahova a felhasználó, stb), aztán térjen ide vissza és folytassa a végrehajtást.

A Javascript azonban nem tud ilyet. Ilyen document.refresh nem létezik (ha létezne, akkor mást jelentene: az oldal újbóli betöltését az URL-ről -- van ehhez hasonló, ne téveszd össze) , wait parancs sincsen.

Akkor mit tehetünk?

Erre való a setTimeout.
Ez a parancs meghívja a kívánt függvényt a megadott idő eltelte után. Ezzel egy függvény akár saját magát is elindíthatja x ezredmásodperc után.

Csináltam neked egy példát a jsfiddle oldalon:
-- Pattogó labda --

Feladatok:
1. Tanulmányozd a pattogó labda kódját, értsd meg, hogyan működik, mitől mozog.
2. Vezess be 2 új változót, az f_irany és a labday nevűeket, és ezek segítségével csináld meg, hogy fel-le is pattogjon a labda.
3: Bónusz: a border-radius css tulajdonság segítségével csináld meg, hogy a labda kör alakú legyen.

Jó szórakozást!