JavaScript — Introduktion genom exempel

5.2 Timer, timeout och intervall

Med en timer kan man aktivera en funktion efter en bestämd tid. Detta kan antingen ske en gång eller om och om igen i ett intervall. Exemplet består av tre delar:

1. Demo av hur setTimeout() och setInterval() fungerar.
2. Animering med hjälp av setInterval(), för att flytta en box åt vänster och höger.
3. Utökning av ett program, där vi tidgare sett hur man kan styra en bil. Nu animeras bilen, så att den också åker i vald riktning.

Sammanfattning

• Med id = setTimeout(f, t) startar man en timer, som anropar funktionen f, då tiden t går ut. Timern kan avbrytas innan tiden t gått ut med clearTimeout(id).
• Med id = setInterval(f, t) startar man en timer, som fortsättar att anropa funktionen f om och om igen i ett tidsintervall på tiden t. Detta fortsätter tills intervallet bryts med clearInterval(id).
• En animering kan skapas genom att anropa en funktion i ett tidsintervall. I funktionen förändrar man elementets left och/eller top och förflyttar därmed elementet i x- och y-led.

Egna övningar

Här följer ett förslag på några egna övningar. Öppna filen test.html och test.js och utför följande:

• Automatisk bildvisning:
  • Skriv en funktion för automatisk bläddring i bildspelet. Då man kommer till sista bilden, ska bildspelet börja om på den första bilden igen. Funktionen ska alltså räkna upp imgIx med 1, men då man kommer förbi sista bildens index, ska imgIx sättas till 1 igen. Sedan anropas showImg, för att visa bilden.
  • Anropa funktionen i ett intervall med lämplig tid (t.ex. 1 sekund). Lägg in intervallanropet i init-funktionen.
• Fördröjd automatisk visning:
  • Lägg till kod för en timeout på t.ex. 3 sekunder. Då tiden gått ut, ska intervallet för den automatiska bildvisningen startas.
  • Varje gång användaren klickar på en knapp för att själv bläddra, dvs då programmet kommer in i funktionen prevImg eller nextImg, ska både timern för timeout och intervallet avbrytas. En ny timeout startas och om användaren då inte själv bläddrat, ska den automatiska bildvisningen startas igen.