Modern web uygulamalarında, zamanlamayla ilgili işlemler oldukça yaygındır. Örneğin, bir mesaj kutusunun birkaç saniye sonra kapanması, bir işlemin düzenli aralıklarla tekrarlanması ya da otomatik olarak kendini durdurması gibi durumlar JavaScript ile oldukça kolay bir şekilde gerçekleştirilebilir. Bu işlemleri gerçekleştirmek için JavaScript bize üç temel zamanlayıcı fonksiyon sunar: setTimeout, setInterval ve clearInterval.
Bu makalede, bu üç fonksiyonun nasıl çalıştığını ve nasıl kullanıldığını adım adım açıklayacağız. Anlatımı sade ve örneklerle destekleyerek özellikle yeni başlayanlar için anlaşılır hale getireceğiz.
1. setTimeout: Belirli Bir Süre Sonra İşlem Yapmak
setTimeout, adından da anlaşılacağı gibi belirli bir süre bekledikten sonra verilen işlemi çalıştırır. Yani, “şu işi şu kadar zaman sonra yap” dememizi sağlar.
Söz Dizimi:
setTimeout(callbackFunction, delayInMilliseconds);
- callbackFunction: Beklemeden sonra çalışacak olan fonksiyondur.
- delayInMilliseconds: Beklenecek süre, milisaniye (1000 ms = 1 saniye) cinsindendir.
Örnek:
Bir kullanıcı sayfaya girdiğinde hemen bir karşılama mesajı, ardından 2 saniye sonra bilgilendirme mesajı gösterelim.
console.log("Hoş geldin!");
setTimeout(() => {
console.log("Bilgilendirme: Site çerez kullanmaktadır.");
}, 2000);
console.log("Lütfen gezinmeye devam edin.");
Çıktı:
Hoş geldin!
Lütfen gezinmeye devam edin.
(Bekleme)
Bilgilendirme: Site çerez kullanmaktadır.
Burada dikkat edilmesi gereken şey şudur: setTimeout, yazıldığı yerde hemen çalışmaz. Sadece belirtilen süreyi başlatır. Kodun geri kalanı çalışmaya devam eder.
2. setInterval: Belirli Aralıklarla İşlem Yapmak
setInterval, bir işlemi belirli aralıklarla sürekli olarak tekrarlar. Bu, örneğin her saniyede bir saat güncellemek veya arka planda veri almak gibi işlemler için kullanışlıdır.
Söz Dizimi:
setInterval(callbackFunction, intervalInMilliseconds);
callbackFunction: Her aralıkta tekrar çalıştırılacak fonksiyondur.intervalInMilliseconds: Her tekrarın kaç milisaniyede bir gerçekleşeceğini belirtir.
Örnek:
Her 1 saniyede bir ekrana “Zaman geçiyor…” yazdıralım.
setInterval(() => {
console.log("Zaman geçiyor...");
}, 1000);
Bu kod çalıştıktan sonra, tarayıcı kapatılana kadar her saniyede bir aynı mesaj yazılır.
3. clearInterval: setInterval’i Durdurmak
setInterval ile başlatılan işlem kendi kendine durmaz. Sürekli tekrar eder. Eğer bu işlemi durdurmak istiyorsak, clearInterval fonksiyonunu kullanmalıyız. Bunu yapabilmek için, setInterval çağrısı bize bir ID (kimlik numarası) döner. Bu ID’yi saklayıp clearInterval ile kullanabiliriz.
Söz Dizimi:
const id = setInterval(callbackFunction, intervalInMilliseconds);
clearInterval(id);
Örnek:
Bir işlemi her saniye tekrarlayıp, 5 saniye sonra durduralım.
const tekrarID = setInterval(() => {
console.log("Veri yenileniyor...");
}, 1000);
setTimeout(() => {
clearInterval(tekrarID);
console.log("Yenileme durduruldu.");
}, 5000);
Çıktı:
Veri yenileniyor... // 1. saniye
Veri yenileniyor... // 2. saniye
Veri yenileniyor... // 3. saniye
Veri yenileniyor... // 4. saniye
Veri yenileniyor... // 5. saniye
Yenileme durduruldu. // ve tekrar durur
Bu örnekte, setInterval ile başlatılan tekrar işlemi, setTimeout sayesinde 5 saniye sonra durdurulmuş olur.
Kullanım Senaryoları
- Bildirimler: Belirli bir süre sonra kaybolması gereken uyarılar.
- Canlı Saat: Her saniye güncellenen saat göstergesi.
- Oyunlar: Oyunda belirli aralıklarla skor artırma veya olay tetikleme.
- Veri Yenileme: Arka planda belli aralıklarla veri çekmek.
Dikkat Edilmesi Gerekenler
setTimeout ve setInterval JavaScript’in asenkron çalışma yapısına örnektir. Yani kod yazıldığı sıraya göre değil, belirtilen süreye göre çalışır.setInterval ile yapılan işlem çok sık olursa (örneğin 10 ms gibi), tarayıcı performansını düşürebilir.clearInterval kullanılmazsa işlemler sonsuza kadar devam eder ve bu istenmeyen sonuçlar doğurabilir.
Sonuç
setTimeout, setInterval ve clearInterval, JavaScript’in zamanla ilgili kontrol mekanizmalarıdır. Bu fonksiyonlar, bir uygulamada zamanlamayla ilgili senaryoları çözmek için oldukça faydalıdır. Basit bir mesajı geciktirmekten, arka planda tekrar eden işlemleri yönetmeye kadar birçok yerde karşımıza çıkarlar.
Yeni başlayan bir geliştirici olarak bu üç fonksiyonu öğrenmek, JavaScript’in çalışma yapısını daha iyi anlamanızı sağlar ve web projelerinizde daha etkili çözümler üretmenizin önünü açar.