Örneklerle JavaScript setTimeout Kullanımı

Belirli bir süre sonra bir kod bloğunun çalışmasını istediğimiz durumlar olmaktadır. Bunun için bize JavaScriptin sunmuş oluduğu setTimeout bu işe güzelce yapmaktadır.

Javascript setTimeout Nedir?

Javascript setTimeout yöntemi, belirtilen süre sonrasında bir kod bloğunu çalıştırır. Yöntem, kod bloğunu sadece bir defa çalıştırır. Yaygın olarak kullanılan sözdizimi setTimeout(fonksiyon, milisaniye) şeklindedir. Eğer belirli bir süre geçtikten sonra çalıştırılmasını istediğimiz bir kod bloğu varsa kullanabileceğimiz bir fonksiyondur.

setTimeout Söz Dizimi

JS setTimeout kullanırken farklı sintakslar kullanılabilir. Bu yapılacak işin konumuna veya ihtiyaçlara göre değişiklikler gösterecektir. Kullanım şekilleri aşağıdaki gibidir.

setTimeout(code)
setTimeout(code, delay)

setTimeout(functionRef)
setTimeout(functionRef, delay)
setTimeout(functionRef, delay, param1)
setTimeout(functionRef, delay, param1, param2)
setTimeout(functionRef, delay, param1, param2, /* … ,*/ paramN)

Öncelikle burada kullanılan parametrelerin neler olduğunu görelim.

• code çalıştırmak istediğimiz kod parçasıdır. Mesela console.log gibi bir işlem yapabilirsiniz. Fonksiyon yerine kod parçası kullanmak güvenlik nedeni ile tavsiye edilmez.
• delay milisaniye cinsinden bekleme süresi. İstenilne işlemler belirtilen süre sonunda işleme alınacaktır.
• param1, param2, … paramN fonksiyone bir parametre geçirmek istenildiğinde kullanılır.

Örnek setTimeout Kullanımı

İlk olarak 3 saniye ( 3000ms ) sonra konsola “Çok bekledik ama değdi.” yazıdıralım.

    function konsolaYaz() {
        console.log('Çok bekledik ama değdi.');
    }

    setTimeout(konsolaYaz, 3000);

    // yaklaşık 3 saniye sonra konsola
    // Çok bekledik ama değdi.
    // Mesajı basılacaktır.

Örneğimizi çalıştırdığınızda 3 saniye sonra konsola Çok bekledik ama değdi. mesajının yazdırıldığını göreceksiniz.

setTimeout Fonksiyona Parametre Geçirme

Bir önceki örneğimizde basit bir şekilde 3 saniye sonra konsola sabit bir mesaj geçirdik. Peki bir değişken ile birlikte istediğimiz mesajı ekrana yazdırmak isteseydik.

    function konsolaYaz(msg) {
        console.log(msg);
    }

    const mesaj = 'İstediğimi ekrana yazar mısın?';
    setTimeout(konsolaYaz, 3000, msg);

    // yaklaşık 3 saniye sonra konsola
    // Çok bekledik ama değdi.
    // Mesajı basılacaktır.

Dikkat ettiyseniz mesajımızı msg değişkeni ile birlikte setTimeout fonskiyonumuza bir parametre olarak girdik. Ard arda istediğimiz kadar parametre geçirebiliriz. Sıralama şu şekilde olacak önce callback fonksiyonu, ikici sırada delay yani bekleme süresi değeri, milisaniye olarak ve son olarak üçüncü ve sonra gelenler ise callback fonksiyonuna gönderilecek parametrelerdir. Callback fonksiyonunu tanılarken bu parametreleri belirterek kullanabiliriz.

Birden Fazla Parametre İle setTimeOut Kullanma

Mesela eğer bir üyemiz sisteme girdi ve ona belirli bir süre sonra son güncellemeleri bildirmek istersek.

    function bildir(uye, msg) {
        const mesaj = `Merhaba ${uye}. Son ziyaretinizden sonra çok gelişmeler oldu. Bunlardan bazıları ${msg} şeklindedir.`
        alert(mesaj);
    }

    const uye = 'Selami';
    const msg = 'Yeni yazılar eklendi. Yeni arkadaşlarımız aramız katıldı';

    setTimeout(bildir, 1500, uye, msg);

    // Yaklaşık 1.5 saniye sonra üye adı ve mesaj bilgisi
    // kullanılarak
    // alert penceresinde gösterilecektir.

Bu örneğimizde birden fazla parametre ile setTimeout kullanımını görüyoruz. Callback fonksiyonuna uye ve msg isimli iki parametre geçiriliyor. Sonra bu parametreler template literal kullanılarak yeni bir mesaj haline getirildikten sonra alert metodu ile gösteriliyor.

setTimeout İle Oluşturulmuş Bir İşlemi Durdurma

Bazı durumlarda setTimeout ile oluşturulan bir zamanlanmış işlemi durdurmak gerekli olabilir. Bu durumda clearTimeout metodunu kullanıyoruz. Bu metod daha önce setTimeout ile oluşturulmuş bir işlemin ID değerini kullanır.

clearTimeout(islevID);

Şeklinde kullanılır. Bir örnek ile durumu daha açık bir şekilde izah edelim.

    function yaz() {
        console.log('Bu mesaj görünmesin');
    }

    // Zamanlamayı yapıyoruz ve işlem IDsini alıyoruz.
    const timeoutID = setTimeout(yaz, 5000);

    // İşlem IDsini kullanarak zamanlamayı durduruyoruz.
    clearTimeout(timeoutID);

    // Konsola herhangi bir şey yazdırılmaz.

Not: clearTimeout fonksiyonuna yanlış bir ID geçirilse herhangi bir işlem yapmaz ve bir hata da oluşmaz.

setTimeout Javascript Fonksiyonu

Belirtilen süre sonrasında belirli işlemlerin yapılmasını sağlayan bir fonksiyondur. Bir callback fonksiyonu, bir süre değeri ve callback fonksiyonuna geçirilecek parametleri alır. setTimeout oluşturulduğunda bir timeoutID değeri geri dönderir.

Aynı anda birden fazla setTimeout fonksiyonu çalıştırılabilir. Birbirleri ile etkileşime girmezler.

Sonuç

Eğer belirli bir süre sonrasında bir iş yapılmasını planlıyorsanız setTimeout fonksiyonunu deneyebilirsiniz. Bu fonksiyon ile oluşturulmuş bir zamanlama işlemini durdurmak için ise clearTimeout metodunu kullanmak gerekir.

JavaScript setTimeout kullanırken sizin de takıldığınız noktalar oludu mu_