Bu yazıda, örnekler yardımıyla JavaScript setInterval() metodunu öğreneceksiniz.
JavaScript’te, belirli zaman aralıklarında bir kod bloğu yürütülebilir. Bu zaman aralıklarına zamanlama olayları denir.
Belirli aralıklarla kod yürütmek için iki yöntem vardır. Bunlar:
- setInterval()
- setTimeout()
Bu yazıda setInterval() metodunu öğreneceksiniz.
JavaScript setInterval()
setInterval() yöntemi, verilen her zamanlama olayında bir kod bloğunu tekrarlar.
JavaScript setInterval’in yaygın olarak kullanılan sözdizimi şöyledir:
1 2 3 | setInterval(fonksiyon, milisaniye); |
Parametreleri:
- fonksiyon – bir kod bloğu içeren bir işlev
- milisaniye – işlevin yürütülmesi arasındaki zaman aralığı
setInterval() yöntemi, pozitif bir tam sayı olan bir intervalID döndürür.
Örnek 1: Her 1 Saniyede Bir Metin Görüntüleme
1 2 3 4 5 6 7 8 9 10 11 12 | <script> // program console ekranında merhaba dünya yazdırır function selamla() { console.log('Merhaba Dünya'); } setInterval(selamla, 1000); </script> |
Örnek çıktı:
1 2 3 4 5 6 7 8 9 | Merhaba Dünya Merhaba Dünya Merhaba Dünya Merhaba Dünya Merhaba Dünya Merhaba Dünya .... |
Yukarıdaki programda setInterval() yöntemi, her 1000 milisaniyede (1 saniye) selamla() işlevini çağırır.
Bu nedenle program her 1 saniyede bir Merhaba dünya metnini görüntüler.
Örnek 2: Her 5 Saniyede Bir Zamanı Gösterme
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <script> // zaman gösterme fonksiyonu function zamanGoster() { // yeni tarih döndürür let tarihSaat= new Date(); // yeni zaman döndürü let saat = tarihSaat.toLocaleTimeString(); console.log(saat) } let display = setInterval(zamanGoster, 5000); </script> |
1 2 3 4 5 6 | 22:12:56 22:13:01 22:13:05 .... |
JavaScript clearInterval()
Yukarıdaki örnekte gördüğünüz gibi, program belirtilen her zaman aralığında bir kod bloğu yürütür. Bu işlev çağrısını durdurmak istiyorsanız, clearInterval() yöntemini kullanabilirsiniz.
clearInterval() yönteminin sözdizimi şöyledir:
1 2 3 | clearInterval(intervalID); |
Burada intervalID, setInterval() yönteminin dönüş değeridir.
Örnek 3: clearInterval() Yöntemini kullanın
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <script> let sayac = 0; // fonksiyon oluşturma let interval = setInterval(function(){ // sayacı 1 arttır sayac += 1; // sayac 5 olduğunda intervali durdur if(sayac === 5){ clearInterval(interval); } // şuanki zamanı göster let dateTime= new Date(); let time = dateTime.toLocaleTimeString(); console.log(time); }, 2000); </script> |
1 2 3 4 5 6 7 | 22:16:00 22:16:02 22:16:04 22:16:06 22:16:08 |
setInterval() yöntemine ek bağımsız değişkenler de iletebilirsiniz. Sözdizimi:
setInterval() yöntemine ek parametreler ilettiğinizde, bu parametreler (parametre1, parametre2, vb.) belirtilen işleve iletilecektir.
Örneğin,
1 2 3 4 5 6 7 8 9 10 11 12 | <script> function selamla(ad, soyad) { console.log('Merhaba' + ' ' + ad + ' ' + soyad); } // parametreli setInterval setInterval(selamla, 1000, 'Hayri', 'KOÇ'); </script> |
1 2 3 4 5 6 7 8 | Merhaba Hayri KOÇ Merhaba Hayri KOÇ Merhaba Hayri KOÇ Merhaba Hayri KOÇ Merhaba Hayri KOÇ .... |
Yorum Yap