ugrás a tartalomhoz

setTimeout / setInterval: melyiket ajánlott használni?

haho · 2011. Okt. 22. (Szo), 05.22
Sziasztok!
Azt szeretném megérdeklődni, hogy a setTimeout() megoldást manapság még szokás-e használni JavaScriptben és ha igen, milyen feladathoz ajánlott?
Illetve a kérdésem másik része, hogy különbözik-e tőle a setInterval() és ha igen, akkor mi a különbség a kettő között?
Köszönöm..
‹ Időzítő submit button ie shifting (fura eset) ›
 ■
1

Persze, hogy különbözik

H.Z. v2 · 2011. Okt. 22. (Szo), 06.59
A setTimeout egyszer lefuttatja a paraméterként kapott függvényt, a setInterval meg addig futtatja, míg le nem állítod.
2

requestAnimationFrame for

Hidvégi Gábor · 2011. Okt. 22. (Szo), 10.13
requestAnimationFrame for smart animating, azaz, ha nem muszáj, ne használd egyiket sem.
10

nem vált be

razielanarki · 2011. Okt. 25. (K), 14.57
A jQuery 1.6 elkezdte használni ezt a megoldást, de 1.6.3ban kivették, és visszatértek a setInterval-hoz

We had high hopes for the browser’s requestAnimationFrame API when we added support into version 1.6. However, one of the highest-volume complaints we’ve received since then relates to the way requestAnimationFrame acts when a tab is not visible. All the animations initiated when the tab is invisible “stack” and are not executed until the tab is brought back into focus. Then they all animate at warp speed! We’ve removed support for this API (which has no impact on the way you call jQuery’s animation features) and plan to incorporate it into a future version of jQuery.


Azaz magyarul kb. a lényeg

Nagy reményeket fűztünk a requestAnimationFrame API-hoz, de sajnos minden idők legtöbb hibajelentését kaptuk azzal kapcsolatban ahogy ez a függvény viselkedik amikor nem aktív az adott böngésző-tab. Az ilyenkor elindított animációk felhalmozódnak, és a tab aktivvá válásakor futnak csak le, hiretlen, a másodperc törtésze alatt. Így hát kivettük a funckió támogatását.


a fenti linken ez azért nem látszik, mert ott az unix timestamp adja a pozicióját (sin/cos paramétereként) a piros pöttynek.
11

Köszi az infót. Kis

Hidvégi Gábor · 2011. Okt. 25. (K), 15.34
Köszi az infót. Kis befektetéssel és gondolkozással ez a probléma is megoldható a jó öreg setTimeout és a window.onblur esemény segítségével.
12

ez igaz

razielanarki · 2011. Okt. 25. (K), 16.54
....de így vagy úgy, az animációk állnak amikor nem aktív a tab (nem kapunk animation frame-t), aztán hirtelen valami jó nagy delta t-vel meghívódik a pl tabváltáskor félbemaradt slidein..., és a júzer csak annyit lát h visszaváltáskor hirtelen fénysebességgel lapoz 14-et a js-es carousel :D
13

1, nem igazán értem, mert én

Hidvégi Gábor · 2011. Okt. 25. (K), 17.07
1, nem igazán értem, mert én az utolsó hozzászólásomban már nem az animation frame használatát javasoltam
2, ne abból induljunk ki, hogy a böngészők jelenleg hibásan kezelik az animation frame-et, később ez még jó lehet, azaz jó tudni, hogy ilyen is létezik
3, ne használj animációt, mert energiapazarló és kontraproduktív; gondolj bele, hogy 450 millióan használják a Windows 7-et, naponta hány gigawatt energia és hányezer munkaóra megy el az animációkra várva
3

Mindkettőt

Poetro · 2011. Okt. 22. (Szo), 12.10
Mindkettőt érdemes használni, csak nem mindegy, hogy mire. Ha van egy ismétlődő feladatot, például egy órát kell frissíteni, akkor érdemes erre a setInterval-t használni. Az olyan ismétlődő folyamatokhoz, amik sokáig tarthatnak, érdemesebb inkább minden lépés után egy újabb setTimeout-ot indítani. Ilyen folyamatok például az AJAX kérések, összetett számítások, bonyolultabb DOM manipulációk. Ezen kívül a setTimeout-tal figyelhetünk aszinkron folyamatokat, mint például egy kép más forrás betöltődését. És ha nem érkezik meg az adat mondjuk 10 másodpercen belül, akkor figyelmeztethetjük erről a felhasználót.
4

Komplex animáció minden böngészőre

haho · 2011. Okt. 22. (Szo), 23.53
Hmm... Pedig azt hittem a setTimeout() használata okozza a problémámat, mert pár helyen azt írták, hogy szerintük elavult a használata.

Amikor megjelenítem a képgalériát akkor ugyanaz a függvény 5 időzített feladatot próbál egyszerre teljesíteni az oldalon setTimeout() segítségével (lábléc és fejléc magasságának változtatása, a képgalériában 2db doboz magasságának és 1db doboz szélességének megjelenítése).

És ez a komplett animáció firefoxban (operában, safariban sem tökéletes) szakadozva fut le, nem tudja tartani azt a sebességet, amire szükségem lenne.
Google chromeban ugyanez dinamikusan és gyönyörűen működik!

Ha pedig firefoxban letiltom a fejléc és lábléc időzítését akkor a galériára vonatkozó maradék 3 elem méretének növelése már ott is dinamikusan végbemegy.

A firefoxnak tehát túl sok az egyszerre öt kérés dinamikus teljesítése?? Vagy van arra megoldás, hogy komplettebb (akadásmentes) animációkat készítsünk, ami nem csak chromeban működik?

Az egyébként normális tőlem, hogy ugyanazzal a függvénnyel növelem egyszerre 4 különböző elem magasságát és 1 elem szélességét? És mind az öt különböző elemre ugyanaz az ID (animacioID=setTimeout..) vonatkozik? Vagy nagyon elvagyok tévedve?

Az animáció amivel próbálkoztam itt látható: www.moviestouch.com
A főoldalon bármelyik képre kell kattintani, aztán a megjelenő adatlapon bármelyik kis fotóra kattintva megnyílik a galéria.
5

Sok másik hiba

Poetro · 2011. Okt. 23. (V), 00.31
Igazából nem a setTimeout okozza nálad a hibát, hanem hogy a kód nagyon messze van az optimálistól. Miért kérsz le minden futás esetében minden elemet a DOM-ból? Miért nem tárolod őket változókban? Miért adsz át stringet a setTimeout-nak? Miért használod a Function objektumot? Ilyen, és ehhez hasonló problémák okozzák azt, hogy az animációd szaggatni fog.
6

2 utolsó kérdés

haho · 2011. Okt. 24. (H), 01.53
Értem. Itt az ideje, hogy optimális kódot tudjak írni. Való igaz én magam is éreztem, hogy ronda a kódom.

Nem akarom itt és most a Ti időtöket vesztegetve kiokíttatni magam, csak még két utolsó kérdést hagy tegyek fel, amire a válasz más olvasók számára is hasznos lehet:

Az egyik, hogy mi az optimális megoldás a Function használata helyett?
A másik pedig, hogy pontosan mit értesz az alatt, hogy miért adok át stringet a setTimeoutnak? Erre a formára gondolsz pl. mint hibás megfogalmazás: setTimeout("FÜGGVÉNYNÉV(PARAMÉTEREK);",50); ? Mert e tekintetben pontosan nem értem, hogy miben van a probléma.

Nagyon köszönöm, ha még ezekkel kisegítesz, aztán több kérdést fel sem teszek addig amíg egy optimális kódot nem írtam végre. MEGÍGÉREM!!
8

eval is the root of evil

Poetro · 2011. Okt. 24. (H), 10.55
Mivel az
eval is the root of evil

ezért amennyiben lehet, el kell kerülni a használatát. És minden olyan esetben, ahol te egy stringet adsz meg, mint futtatható kód, ott lényegében eval hívás történik. Például:
forFullInnerHeight.onmouseover=Function("rolledStartOrNotForThePages(forFullInnerHeight,'siteScroll');");
Ez felírható lenne például:
forFullInnerHeight.onmouseover=function () { 
  rolledStartOrNotForThePages(forFullInnerHeight, 'siteScroll');
};
formában. Ez azért is jó, mert a böngésző JavaScript motorja tudja majd optimalizálni a kódodat, tud előzetesen kalkulálni vele, míg egy stringgel nem tud mit kezdeni, egészen addig, amíg a kérdéses kód le nem fut.
Hasonló a helyzet a setTimeout-tal is.
setTimeout("opacityToAnything(boxForBG,100);",50);
helyett például
setTimeout(function () {
  opacityToAnything(boxForBG,100);
}, 50);
Valamint ha valamelyik kód ismétlődik, akkor ne írd már ki feleslegesen többször.
scrollBarForTheSiteCompleteSet.onmouseover=Function("scrollBarForPhotoGalleryOpacityForThePages('siteScroll');");
	     scrollBarForTheSiteCompleteSet.onmouseout=Function("scrollBarForPhotoGalleryOpacityForThePages('siteScroll');");
helyett
function siteGalleryScrollHandler() {
  scrollBarForPhotoGalleryOpacityForThePages('siteScroll');
}
scrollBarForTheSiteCompleteSet.onmouseover = siteGalleryScrollHandler;
scrollBarForTheSiteCompleteSet.onmouseout = siteGalleryScrollHandler;
Így nem csak gyorsabb, de rövidebb is lesz a kódod. Sok esetben sokkal rövidebb. De van a kódban még több száz ilyen hiba. Ajánlom elolvasásra például a JavaScript függvények cikkemet.
9

Nagyon hálás vagyok

haho · 2011. Okt. 24. (H), 22.58
Igazán hálás vagyok Neked!
ELVONULTAM OPTIMALIZÁLNI A KÓDOT... amíg ez nincs meg addig nem tudnék már nyugodtan aludni.
Ezer köszönet még egyszer a segítségért, nem is beszélve a példákról!!
7

csúnya setTimeout

haho · 2011. Okt. 24. (H), 03.19
Á, a setTimeout esetében arra gondolsz, hogy valahol nem függvényt adtam meg, hanem voltam olyan buta és ilyeneket csináltam például:

setTimeout("document.getElementById('nev').onclick=closeThis",50);

???