setInterval-funktion perusteet JavaScriptissä

Tällä oppitunnilla opimme työskentelemään ajastimien kanssa JavaScriptissä. Kun ymmärrät ajastimet, voit suorittaa sivulla toimintoja automaattisesti määritetyn aikavälin jälkeen. Voit esimerkiksi luoda kuvien liukusäätimen, jossa kuvat vaihtuvat joka sekunti.

Ajastimien kanssa työskentelyyn JavaScriptissä käytetään setInterval -funktiota, joka suorittaa annettua koodia tietyin väliajoin.

Tämä funktio toimii seuraavasti: ensimmäisenä parametrina se hyväksyy funktion lähdekoodin, ja toisena parametrina - intervallin, jonka jälkeen tätä funktiota kutsutaan automaattisesti. Toinen parametri annetaan millisekunteina (1000 millisekuntia = 1 sekunti).

Opiskellaan funktion toimintaa jollakin esimerkillä. Kirjoitetaan esimerkiksi koodi, joka tulostaa jotain konsoliin joka sekunti.

Aluksi tehdään funktio, joka tulostaa jotain konsoliin:

function timer() {
	console.log('!');
}

Ja nyt setInterval -funktion avulla pakotamme luomamme funktion suoritettavaksi joka sekunti:

setInterval(timer, 1000);

function timer() {
	console.log('!');
}

Ei ole tarpeen luoda erillistä funktiota - voit yksinkertaisesti antaa ensimmäisenä parametrina setInterval:lle anonyymin funktion, näin:

setInterval(function() {
	console.log('!');
}, 1000);

Käynnistä ajastin, joka joka 3 sekunti tulostaa jotain konsoliin.