xom`s pinion - Tom Hnatovsky Blog

Předání objektu metodou setTimeout

15. ledna 2007 Web design 3 komentáře

V JavaScriptu existuje funkce setTimeout, která pozdrží volání definované metody o daný počet milisekund. Na internetu je mnoho dotazů na to, jak této funkci podsunout instanci nějakého již existujícího objektu, takže si to povíme zde - v rámci jakéhosi dalšího seznamování s trochu nestandardním používáním elementárních funkcí JavaScriptu.

Proč trochu nestandardní? Metoda setTimeout má dva parametry, přičemž první je ochoten přijímat string – text v uvozovkách. Uvozený text je funkce, která se má vykonat po uplynutí druhého parametru – času (integer).

Příklad prvního užití:

setTimeout(“alert(‘Hláška’)”, 60)

Výše popsané řešení ve většině jednodušších případů postačí – předávají se pouhé parametry. Druhou možností je vypsání přímo volané funkce, bez uvozovek. Jenže v tomto případě nelze klasicky do kulatých závorek vložit parametry – závorky s parametry funkce lze vložit pouze do uzávorkované verze.

Příklad druhého využití:

setTimeout(funkce, 60)

A nyní se blížíme řešení předání instance nějakého již inicializovaného objektu. Trikem je použití deklarace pomocné bezejmenné funkce, která bude volat požadovanou metodu i s parametrem, který předá námi požadovanou referenci na objekt.

Příklad třetího využití:

seTimeout( function () { funkce ( document.getElementById( ‘cokoliv’ ), ‘dalsi parametr’) }, 60)

Abychom se nebavili pouze teoreticky – pojďme si, jak je tu dobrým zvykem, ukázat živý příklad!

Chtějme použít fadeIn / fadeOut efekt na div s unikátním id="totoChceme". Pokud bychom nepoužili předávání přímo reference na objekt, tak bychom museli v každé metodě fadeIn i fadeOut použít funkce getElementById, pokud použijeme předání reference, tak se element inicializuje pouze jednou – při načtení stránky.

Definujeme si inicializační funkci:

var fadeBox; // definice globální proměnné pro všechny metody ve stránce function initFadeBox () { fadeBox = document.getElementById( "totoChceme" ); // objekt přiřadíme proměnné až po načtení stránky – do té doby vlastně zatím ještě neexistuje }

Nyní je čas si definovat metodu, která se nám bude starat o objevování a mizení objektu:

function setOpacity ( obj, opacity ) { opacity = (opacity == 100?99.999:opacity); obj.style.filter = "alpha(opacity:"+opacity+")"; // IE/Win obj.style.KHTMLOpacity = opacity/100; // Safari<1.2, Konqueror obj.style.MozOpacity = opacity/101; // Older Mozilla and Firefox obj.style.opacity = opacity/100; // Safari 1.2, newer Firefox and Mozilla, CSS3 }

Teď si nadefinujeme metody, které budou obsluhovat „rozsvěcení“ a „zhasínání“

function fadeIn( obj, opacity ) { if ( opacity <= 100 && obj ) { setOpacity( obj, opacity ); opacity += 10; setTimeout( function () { fadeIn ( obj, opacity ) }, 50 ); // rekurze na tuto funkci, k provedení dalšího stupně změny průhlednosti } } function fadeOut( obj, opacity ) { if ( opacity >= 0 && obj ) { setOpacity( obj, opacity ); opacity -= 10; setTimeout( function () { fadeOut ( obj, opacity ) }, 50 ); // rekurze na tuto funkci, k provedení dalšího stupně změny průhlednosti } }

Kompletní ukázku si můžete prohlédnout přímo v akci.