Javascript setInterval Kullanımı

Belirli zamanlarda istediğimiz kodları çalıştırmamız gerekli oluyor. Bunun için bazen sadece bir defa kod çalıştırmak veya bazen de sürükli olarak tekrar tekrar aynı kodu çalıştırmak gerekebilir.

Tek seferlik bir kod parçasını çalıştıracaksak bu durumda Javascript bize setTimeout metodunu sunuyor. Fakat bizim sürekli olarak tekrar tekrar aynı kodu çalıştırmamız gerekiyorsa bu durumda setInterval metodunu kullanabiliriz.

Javascript setInterval Nedir?

setInterval Javascript ile belirli aralıklar ile aynı işlemi yapmak için geliştirilmiş bir metotdur. Süre milisaniye olarak belirtilir ve belirtilen süre beklendikten sonra istenen kod çalıştırılır. Sonrasında yine belirlenen süre kadar bekleme yapılır ve sonrasında tekrar kod çalıştırılır. Bu böylece devam eder. Eğer program sonlandırılır veya clearInterval çağrılırsa bu işlem durdurulur.

setInterval Söz Dizimi

setInterval metodunu kullanırkan farklı söz dizimleri ile karşılaşılabilir. Bunlar aşağıdaki gibidir.

setInterval(kod)
setInterval(kod, gecikme)

setInterval(fonk)
setInterval(fonk, gecikme)
setInterval(fonk, gecikme, arg0)
setInterval(fonk, gecikme, arg0, arg1)
setInterval(fonk, gecikme, arg0, arg1, /* … ,*/ argN)

Şimdi bu parametreleri inceleyelim.

• kod bir kod stringidir ve fonskiyon olması gerekmez. Fakat güvenlik sebebi ile tavsiye edilmez.
• fonk süre geçtiği zaman çağrılması istenen bir fonksiyondur.
• gecikme kod veya fonksiyonun çağrılması için beklenecek süreyi milisaniye olarak belirtir.
• arg0 …argN fonksiyona geçirilecek parametreleri belirtir. İstenildiği kadar parametre girilebilir.

setInterval Metodunun Kullanımı

Öncelikle ile ilk olarak 3 sayinede bir konsola setInterval çalıştı yazdıralım.

const mesajYaz = () => {
    console.log("setIterval Calisti");
}
setInterval(mesajYaz, 3000);

Kodumuzu incelediğimizde bir adet mesajYaz fonksiyonu göreceğiz bu fonksiyonun görevi sadece çağrıldığında konsola setInterval çalıştı yazmak.

Sonrasında setInterval metodunu çağrıyoruz. Bu metoda çağıracağımız mesajYaz ve gecikme süresini, 3000, parametre olarak giriyoruz. Buarada 3000 milisaniye, 3 saniyedir.

Bu kodu çalıştırdığımızda

setIterval Calisti
setIterval Calisti
setIterval Calisti
setIterval Calisti
setIterval Calisti
...

şeklinde konsola çıktı verir. Her üç saniyede bir mesajYaz fonksiyonu çalıştırılacaktır.

setInterval Kullanım Örnekleri

Şimdi farklı bir işlem yapalim ve elimizde olan toplam değişkeninin değerini bir artırarak konsola yazdıralım.

let sayac = 0;

const yazdir = () => {
    console.log(sayac);
    sayac += 1;
}

setInterval(yazdir, 1000);

Eğer kodu çalıştırırsanız saniyede bir konsola sayac değerinin yazıldığını ve sonrasında bu değerin 1 artırıldığını göreceksiniz.

Şimdi farklı bir işlem yapalım ve setInterval ile nasıl parametre kullanacağımızı görelim.

setInterval İle Parametre Kullanma

Şimdi belirli bir süre sonra çalışmasını istediğimiz fonksiyona nasıl parametre geçeceğimizi görelim. setInterval kullanırken ilk parametre çağrılacak fonksiyon, ikinci parametre ise milisaniye cinsinden bekleme süresidir. Üç ve sonraki parametreler ise, ilk parameterede verilen çağrılacak fonksiyona parametre olarak geçecektir.

const mesajYaz = (mesaj) => {
    console.log(mesaj);
}

setInterval(mesajYaz, 1000, "Merhaba Dünya!");

// Uygulamayı çalıştırdığımızda bir saniye içerisinde
// konsola 
// Merhaba Dünya!
// yazılacak ve her saniye bu tekrar edecektir.

Örneğimizde sadece çalıştıracağımız fonksiyona bir mesaj geçtik. Bunu da setInterval içerisinde belirttik.

Aynı şekilde birden fazla da parametreyi çağıracağımız fonksiyona geçebiliriz.

Çağırma İşlemini Durdurma clearInterval

setIterval ile çalıştırdığımız zamanlama işlemini clearInterval ile durdurabiliriz. Bunun için şu yöntemi kullanıyoruz.

const mesajYaz = (mesaj) => {
    console.log(mesaj);
}

const intervalID = setInterval(mesajYaz, 1000, "Merhaba Dünya!");

// Çalışan bu zamanlama mekanizmasını durduralım.

clearInterval(intervalID);

Görüldüğü gibi setInterval çağrıldığında geriye bir ID değeri dönderir. Bu ID değerini clearInterval ile kullanarak bu zamanlamayı durdurabiliriz.

Sonuç

Belirli bir süre sonra çalışan ve bunu aynı süre içerisinde tekrarlayan Javascript metodu setItervaldir.

Soru ve yorumlarınızı bekliyoruz.