JavaScript öğrenme serüvenimizde şu ana kadar değişkenler, fonksiyonlar, DOM manipülasyonu ve olaylar (events) gibi birçok temel yapıyı geride bıraktık. Şimdi ise web uygulamalarımıza “zaman” boyutunu katmanın vakti geldi. Bir web sitesinde belirli bir süre sonra ekranda beliren bir kampanya pop-up’ı, her saniye güncellenen bir geri sayım aracı veya belirli aralıklarla arka planda verileri kaydeden otomatik bir sistem gördüyseniz, JavaScript Zamanlayıcıları (Timers) ile karşı karşıyasınız demektir.
Bu kapsamlı rehberde, JavaScript’te zamanı nasıl kontrol edebileceğinizi, kodunuzu nasıl bekletebileceğinizi veya belirli aralıklarla nasıl tekrar ettirebileceğinizi bol örneklerle ve arka planda yatan “Event Loop” (Olay Döngüsü) mantığıyla birlikte öğreneceğiz.
1. Zamanlayıcı (Timer) Nedir?
JavaScript, varsayılan olarak tek iş parçacıklı (single-threaded) bir dildir; yani aynı anda sadece tek bir komutu işleyebilir. Ancak modern web uygulamalarının donmadan, akıcı bir şekilde çalışabilmesi için bazı işlemlerin arka plana atılması veya ertelenmesi gerekir.
Zamanlayıcılar, yazılımcılara kodun çalıştırılma zamanı üzerinde kontrol imkanı sunan yerleşik (built-in) JavaScript fonksiyonlarıdır. Temel olarak iki ana zamanlayıcı fonksiyonumuz vardır:
setTimeout(): Belirli bir kod bloğunu, verilen süre dolduktan sonra sadece bir kez çalıştırır.setInterval(): Belirli bir kod bloğunu, verilen süre her dolduğunda sürekli ve düzenli olarak tekrar çalıştırır.
Bu fonksiyonlar zamanı milisaniye (ms) cinsinden ölçer. Yani 1 saniyelik bir bekleme süresi oluşturmak istiyorsanız, JavaScript’e 1000 değerini vermelisiniz.
2. Sadece Bir Kez Çalıştır: setTimeout() Kullanımı
setTimeout(), “Şu kadar süre bekle ve ardından bu işi yap” demek istediğimizde kullanacağımız en temel fonksiyondur.
Sözdizimi (Syntax):
setTimeout(calisacakFonksiyon, gecikmeSüresiMilisaniye, parametre1, parametre2...);
Temel Bir Örnek: Kullanıcı web sitemize girdikten tam 3 saniye sonra ekranda bir hoş geldin mesajı göstermek istediğimizi varsayalım:
function hosgeldinMesaji() {
console.log("Sitemize hoş geldiniz! Umarım harika vakit geçiriyorsunuzdur.");
}
// Fonksiyonu 3000 milisaniye (3 saniye) sonra çalıştırır
setTimeout(hosgeldinMesaji, 3000);
Eğer tek satırlık kısa bir işlem yapacaksanız, modern bir yöntem olan ok fonksiyonlarını (arrow functions) kullanarak kodu çok daha kısa hale getirebilirsiniz:
setTimeout(() => {
console.log("3 saniye doldu ve ben çalıştım!");
}, 3000);
3. Sürekli Tekrar Et: setInterval() Kullanımı
Eğer bir işlemin sadece bir kez değil, örneğin her 2 saniyede bir sürekli olarak yapılmasını istiyorsanız setInterval() kullanmalısınız. Bir dijital saat veya sayfadaki bir görselin sürekli değişmesini sağlayan animasyonlar bu mantıkla kurulur.
Örnek Kullanım:
let sayac = 0;
function sayaciArtir() {
sayac++;
console.log("Mevcut saniye: " + sayac);
}
// Her 1000 milisaniyede (1 saniye) bir 'sayaciArtir' fonksiyonunu tetikler
setInterval(sayaciArtir, 1000);
Yukarıdaki kod çalıştığında, tarayıcı konsolunuzda her saniye yeni bir sayının belirdiğini göreceksiniz. Ancak burada bir sorun var: Bu döngü nasıl duracak? Eğer müdahale etmezseniz, siz sekmeyi kapatana kadar sonsuza dek çalışmaya devam eder.
4. Zamanlayıcıları Durdurmak: clearTimeout() ve clearInterval()
Başlattığımız zamanlayıcıları iptal etmek, performansı korumak ve hafıza sızıntılarını (memory leaks) önlemek adına hayati bir öneme sahiptir.
Siz setTimeout() veya setInterval() çağırdığınızda, JavaScript size benzersiz bir ID (kimlik numarası) döndürür. Bu ID’yi bir değişkende saklayarak, istediğimiz zaman clearTimeout(ID) veya clearInterval(ID) fonksiyonlarına gönderip zamanlayıcıyı durdurabiliriz.
Durdurulabilir Bir Sayaç Örneği: 10’dan geriye doğru sayan ve 0 olduğunda kendini imha eden bir bomba sayacı yapalım:
let geriSayim = 10;
// Zamanlayıcıyı başlatıyoruz ve ID'sini bir değişkende saklıyoruz
let zamanlayiciId = setInterval(() => {
console.log(geriSayim + " saniye kaldı...");
geriSayim--;
// Sayaç sıfırın altına düştüğünde durdurma işlemi
if (geriSayim < 0) {
console.log("BOMMM! Süre doldu!");
// setInterval işlemini iptal ediyoruz
clearInterval(zamanlayiciId);
}
}, 1000);
Bu sayede, clearInterval() komutu okunduğu an döngü kırılır ve program güvenli bir şekilde işlemi sonlandırır.
5. Arka Plandaki Sihir: Event Loop (Olay Döngüsü) ve Zamanlayıcılar
JavaScript’te zamanlayıcıları gerçekten anlamak için, arka planda çalışan Event Loop (Olay Döngüsü) sisteminin nasıl çalıştığını yüzeysel de olsa bilmeniz gerekir.
Bir setTimeout() fonksiyonu çağırdığınızda, JavaScript bu işlemi ana iş parçacığında bekleterek tüm siteyi dondurmaz. Bunun yerine görevi tarayıcının Web API’sine devreder. Web API, süreyi arka planda sayar ve süre dolduğunda çalıştırılması gereken fonksiyonu (callback) bir “Görev Kuyruğuna (Task Queue)” yerleştirir. Event Loop ise sürekli olarak Ana Yığın’ın (Call Stack) boşalıp boşalmadığını kontrol eder; eğer boşsa, kuyruktaki görevi alıp çalıştırır.
Önemli ve Şaşırtıcı Bir Kural: setTimeout(fonksiyon, 1000) yazdığınızda, bu kodun tam olarak 1000 milisaniye sonra çalışacağının garantisi yoktur. Bu süre aslında fonksiyonun çalıştırılması için geçmesi gereken minimum süreyi ifade eder. Eğer o esnada JavaScript çok ağır ve uzun süren bir işlem (örneğin devasa bir döngü) yapıyorsa ve ana iş parçacığı (main thread) meşgulse, sizin zamanlayıcınız gecikecektir.
Sıfır Milisaniye Mantığı (0ms Gecikme): Bazen şu tarz kodlar görebilirsiniz:
console.log("Bir");
setTimeout(() => console.log("İki"), 0);
console.log("Üç");
Süre 0 milisaniye (gecikmesiz) olduğu için çıktının Bir -> İki -> Üç olmasını bekleyebilirsiniz. Ancak çıktı Bir -> Üç -> İki şeklinde olacaktır. Neden mi? Çünkü süre 0 olsa bile, işlem Görev Kuyruğuna atılır ve Event Loop’un ancak mevcut ana kodlar (“Bir” ve “Üç” logları) bittikten sonra bu kuyruğu okumasına izin verilir. Bu taktik, ağır işlemleri bölüp arayüzün (UI) donmasını engellemek için profesyonel geliştiriciler tarafından sıklıkla kullanılır.
6. Zamanlayıcıların Web Geliştirmedeki Gerçek Hayat Senaryoları
Bu fonksiyonlar sadece konsolda sayı saymak için kullanılmaz, gerçek dünya projelerinin temel taşlarıdır:
- Debouncing ve Throttling (İşlem Sınırlandırma): Kullanıcı bir arama kutusuna hızlıca yazı yazarken, her harfe basışta sunucuya bir veri tabanı sorgusu atmak sistemi çökertir. Bunun yerine
setTimeoutkullanılarak, “kullanıcı yazmayı bıraktıktan yarım saniye sonra aramayı başlat” şeklinde sistemler kurulur. - Afiş (Slider/Carousel) Otomasyonu: Sitenizin ana sayfasındaki görsellerin veya haberlerin her 5 saniyede bir otomatik olarak yana kayması
setIntervalsayesinde gerçekleşir. - Kullanıcı Oturum Kontrolü: Bankacılık gibi güvenliğin önemli olduğu sitelerde, kullanıcı belli bir süre fareyi oynatmazsa “Oturumunuz 10 saniye içinde kapanacak” şeklinde çalışan zamanlayıcılar oluşturulur.
- Animasyonlar: Geçmişte animasyonların tamamı
setIntervalveyasetTimeoutkullanılarak yapılıyordu. Günümüzde bu görev büyük ölçüde CSS verequestAnimationFramefonksiyonuna devredilmiş olsa da, JavaScript oyunlarında zamanlayıcıların rolü hala büyüktür.
Sonuç
JavaScript zamanlayıcıları olan setTimeout ve setInterval, kodunuza zaman bağımsızlığı kazandırır. Bu fonksiyonlar sayesinde senkron ve tek düze çalışan programlarınızı, arka planda işleyen, asenkron ve kullanıcı etkileşimine göre zamanlanmış dinamik uygulamalara çevirebilirsiniz. Unutmanız gereken tek ve en önemli altın kural şudur: Başlattığınız her döngüsel zamanlayıcıyı işi bittiğinde clearInterval ile durdurmayı alışkanlık haline getirin!
Bu öğrendiğiniz zamanlayıcı özellikleri sayesinde artık kendi dijital saatinizi, sayaçlı quiz (bilgi yarışması) uygulamalarınızı ve otomatik kayan fotoğraf galerilerinizi rahatlıkla oluşturabilirsiniz. Kodlamaya devam edin, pratik yaptıkça zamanlamanın efendisi olacaksınız!
