Programowanie w JavaScript Rusz głową!

438

Rozdział 9.

Zastosowanie setTimeout w naszej grze w obrazy

window.onload = function() {

var images = document.getElementsByTagName(”img”);

for (var i = 0; i < images.length; i++) {

images[i].onclick = showAnswer;

}

};

function showAnswer(eventObj) {

var image = eventObj.target;

var name = image.id;

name = name + ”.jpg”;

image.src = name;

setTimeout(reblur, 2000, image);

}

function reblur(image) {

var name = image.id;

name = name + ”blur.jpg”;

image.src = name;

}

Ten kod jest dokładnie taki sam

jak wcześniej. Nic się w nim

nie zmieniło…

Jednak teraz, w momencie wyświetlenia

obrazu w normalnej postaci wywołujemy

także funkcję setTimeout, która

spowoduje zgłoszenie zdarzenia po

upływie dwóch sekund.

Naszą procedurą obsługi będzie funkcja

reblur (pokazana poniżej), zostanie

ona wywołana po 2000 milisekund

(czyli po dwóch sekundach), przy czym

przeglądarka przekaże do niej argument

— obiekt obrazka, który należy zmienić.

Teraz, kiedy zostanie wywołana ta

funkcja, przeglądarka przekaże do

niej obrazek.

Nasza funkcja może odebrać obiekt

obrazka i użyć go do odczytania

identyfikatora elementu, na podstawie

którego utworzy nazwę pliku nieostrej

wersji obrazu. Kiedy zapiszemy ją we

właściwości src, przeglądarka zastąpi

normalną wersję obrazu jego wersją

nieostrą.

Kończenie gry

Nadszedł czas, aby zakończyć naszą grę w obrazy. Chcemy, by po upływie kilku

sekund automatycznie znowu pojawiła się nieostra wersja obrazka. A zgodnie z tym,

czego się właśnie dowiedzieliśmy, w wywołaniu funkcji

VHW7LPHRXW

można przekazać

argument, który później zostanie przekazany do procedury obsługi. Sprawdźmy, jak

to zrobić.

Obejrzyj to!

Niestety, to prawda. Ten kod nie będzie działać, jeśli Ty bądź

Twoi użytkownicy będziecie używać przeglądarki Internet

Explorer 8 lub starszej. Jednak czytając tę książkę, w ogóle nie

powinieneś korzystać z tak starej wersji przeglądarki! Dalej

w książce pokażemy inne rozwiązanie, które pozwoli rozwiązać

ten problem (zarówno w przeglądarce IE8, jak i jej starszych

wersjach).

Ten dodatkowy argument funkcji setTimeout

nie jest dostępny w przeglądarce IE8

i starszych.