window.setInterval metodu, belirtilen bir fonksiyonun veya kodun belli zaman aralıklarıyla tekrar tekrar çalıştırılmasını sağlar.
Sözdizimi
tekrarKimlik = window.setInterval(fonksiyon, yineleme);
| fonksiyon | Çalıştırılacak fonksiyon veya kodlar. |
| yineleme | Milisaniye olarak yineleme süresi. |
Dönüş Değeri
| tekrarKimlik | Yineleme işlemi ile ilgili işlem yapabilmek için atanan eşsiz sayısal kod. Bu kod genel olarak yineleme işleminin iptali için clearInterval metodu ile kullanılır. |
Aşağıdaki örnek, window.setInterval metodu ile üç farklı div elementinden ikisinin belirtilen farklı sürelerde, birinin ise isteğe göre belirtilen süre aralıklarında arkaplan renginin değiştilmesini göstermektedir.
<style type="text/css">
.ornekBicim
{
width:120px;
height:100px;
text-align:center;
font-size:large;
}
</style>
<label for="sureGiris">Süre : </label>
<input type="text" id="sureGiris" /> ms
<input type="button" value="Değiştir/Başla" onClick="kutuOzelKur()"/>
<table border="0" cellpadding="0" cellspacing="0">
<tr><td>
<div id="kutu1" class="ornekBicim">
<span id="kutu1Bilgi"></span>
</div>
</td>
<td>
<div id="kutu2" class="ornekBicim">
<span id="kutu2Bilgi"></span>
</div>
</td>
<td>
<div id="kutuOzel" class="ornekBicim">
<span id="kutuOzelBilgi"></span>
</div>
</td></tr></table>
<script type="text/javascript">
var kutu1Renk = true;
var kutu1Sayi = 0;
var kutu2Renk = true;
var kutu2Sayi = 0;
var kutuOzelRenk = true;
var kutuOzelSayi = 0;
var sayacKimlik;
function kutu1Degistir()
{
if(kutu1Renk)
{
document.getElementById('kutu1').style.backgroundColor = '#009900';
kutu1Renk = false;
}
else
{
document.getElementById('kutu1').style.backgroundColor = '#0099BB';
kutu1Renk = true;
}
document.getElementById('kutu1Bilgi').innerHTML = ++kutu1Sayi;
}
function kutu2Degistir()
{
if(kutu2Renk)
{
document.getElementById('kutu2').style.backgroundColor = '#FF9900';
kutu2Renk = false;
}
else
{
document.getElementById('kutu2').style.backgroundColor = '#00FF99';
kutu2Renk = true;
}
document.getElementById('kutu2Bilgi').innerHTML = ++kutu2Sayi;
}
function kutuOzelDegistir()
{
if(kutuOzelRenk)
{
document.getElementById('kutuOzel').style.backgroundColor = '#0099BB';
kutuOzelRenk = false;
}
else
{
document.getElementById('kutuOzel').style.backgroundColor = '#DDDD00';
kutuOzelRenk = true;
}
document.getElementById('kutuOzelBilgi').innerHTML = ++kutuOzelSayi;
}
function kutuOzelKur()
{
if(sayacKimlik != null)
window.clearInterval(sayacKimlik);
var miktar = document.getElementById('sureGiris').value;
sayacKimlik = window.setInterval('kutuOzelDegistir()',miktar);
}
window.setInterval('kutu1Degistir()',500);
window.setInterval('kutu2Degistir()',750);
</script>
Test Edin