setTimeout

  

Med setTimeout kan vi "pausa" ett javaskript – vi bestämmer alltså hur lång tid som skall gå från att den ena funktionen körs tills nästa tar vid.

Det här kan komma till nytta, till exempel om vi vill visa en sida en kort stund och sedan öppna nästa sida automatiskt.

Koden som åstadkommer formuläret och knappen ovan, och gör att texten ändras, ser ut så här:

Själva skriptet lägger vi i HEAD-elementet:

<SCRIPT language="JavaScript">
<!-- Göm
    function nyText()
{
    document.formular.textEtt.value="Texten ändrades";
    setTimeout("bytText()",1500);
}
    function bytText()
{
    document.formular.textEtt.value="...och ändrades igen";
}
// Sluta gömma -->
</SCRIPT>

Och formuläret som hör till hamnar i BODY-elementet:

<FORM name="formular">
<INPUT type="text" name="textEtt" value="Vad händer här?" size="30">&nbsp;&nbsp;<INPUT TYPE="button" name="knapp" value="Klicka" onClick="nyText()">
</FORM>

Vi börjar med FORM-taggen

Formuläret måste ha ett namn (formular) och texten som visas i det får också ett namn (textEtt). Den text som ursprungligen visas är "Vad händer här?". Efter raden med texten ligger en knapp, och när besökaren klickar på denna anropas funktionen "nyText()".

Och sedan tar vi skriptet

document.formular.textEtt.value="Texten ändrades";
I denna funktion får texten i formuläret "formular", som finns på den här sidan (document), det nya värdet "Texten ändrades". Nu är det alltså den nya texten som visas i textraden.

setTimeout("bytText()",1500);
Här kommer funktionen setTimeout in. Den säger följande: Anropa funktionen "bytText()" när det har gått 1500 millisekunder, alltså en och en halv sekund.

document.formular.textEtt.value="...och ändrades igen";
När denna tid har gått, anropas funktionen "bytText()". Den fungerar exakt likadant som funktionen "nyText()", med den enda skillnaden att "textEtt" får värdet "...och ändrades igen". Nu är det den nya texten som visas i raden.

Skicka vidare

Ett sätt att använda setTimeout, är att öppna en sida, ge besökaren en kort information av något slag och sedan automatiskt skicka besökaren vidare till nästa sida. Vi gör om skriptet ovan:

<SCRIPT language="JavaScript">
<!-- Göm
    function nySida()
{
    setTimeout("bytSida()",5000);
}
    function bytSida()
{
    window.location="nyasidan.html";
}
// Sluta gömma -->
</SCRIPT>

Nu gör den första funktionen ingenting annat än att bromsa skriptkörningen i 5 sekunder. Sedan startar funktionen "bytSida()". Den funktionen öppnar sidan "nyasidan.html".

Men för att det här skall fungera, måste vi dessutom ha något som anropar funktionen "nySida()". Detta anrop lägger vi i BODY-taggen:

<BODY onLoad="nySida()">

Genom att anropet placeras i den inledande BODY-taggen, anropas funktionen inte förrän sidan med skriptet är färdigladdad.

Pröva skriptet här

I stället för att skicka besökaren till en ny sida, kan vi förflytta honom till en annan plats på samma sida. I så fall placerar vi ett ankare på platsen som besökaren skall flyttas till, och ändrar litet i den sista skriptraden:

{
    window.location="#hit";
}

Så här ser ankaret ut:

<A name="hit">Hit flyttas besökaren</A>

© SupportData.Net