Javascript setInterval

Er zijn situaties waarin je wilt dat een bepaalde javascript functie niet meteen, maar na een tijdje uitgevoerd of herhaalt moet worden. Daarvoor heeft Javascript de setInterval() functie. Die functie heeft twee parameters nodig tussen de ronde haakjes: De functie die uitgevoerd moet worden en om de hoeveel tijd die functie uitgevoerd moet worden, de interval. De waarde van de interval is in mili seconden. In onderstaand voorbeeld wordt de functie ‘popUp’ elke 2 seconden uitgevoerd.

<body>
<script type=”text/javascript”>
setInterval(popUp, 2000);

function popUp()
{
     alert(“ok”);
}
</script>
</body>

Een setInterval wordt in principe oneindig herhaald. Om dat te voorkomen kan de setInterval gestopt worden door de functie clearInterval(). Tussen de ronde haakjes van clearInterval() wordt de naam aangegeven van de setInterval die beëindigd moet worden. Daarvoor heeft de setInterval wel een naam nodig. Die naam wordt gegeven via een variabel. In het voorbeeld hieronder wordt de functie ‘popUp’ 1 keer uitgevoerd en dan wordt de interval meteen gestopt.

<body>
<script type=”text/javascript”>
var interval=setInterval(popUp, 2000);

function popUp()
{
     alert(“ok”);
     clearInterval(interval);
}
</script>
</body>

Als je een setInterval vaker dan 1 keer, maar niet oneindig wilt gebruiken, kun je nog een variabel gebruiken die bijhoudt hoevaak de setInterval actief is geweest. In combinatie met een if-voorwaarde kan de setInterval alsnog gestopt worden. In onderstaand voorbeeld wordt de setInterval 5 keer uitgevoerd. Elke keer wordt de variabel ‘aantalIntervals’ met 1 verhoogt. Als de waarde van ‘aantalIntervals’ gelijk is aan 5, wordt de setInterval beëindigd.

<body>
<script type=”text/javascript”>
var interval=setInterval(popUp, 2000);
var aantalIntervals=0;

function popUp()
{
     aantalIntervals+=1;
     alert(aantalIntervals);

     if(aantalIntervals==5)
     {
         clearInterval(interval);
     }
}
</script>
</body>

 

Leave a Reply

Your email address will not be published. Required fields are marked *