JavaScript zamanlayıcılar, kodların belirli bir süre sonra veya belli aralıklarla çalışmasını sağlayan yapılar sunar. Genellikle setTimeout ve setInterval fonksiyonları kullanılır. Bu özellikler sayesinde bir web sayfasında dinamik etkileşimler oluşturmak oldukça kolaydır. Örneğin, bir uyarı mesajının 3 saniye sonra gösterilmesi ya da her 5 saniyede bir veri güncellenmesi bu fonksiyonlarla mümkün olur.
setTimeout ile Gecikmeli İşlemler
setTimeout(), belirli bir süre sonra bir fonksiyonun çalıştırılmasını sağlar. Süre milisaniye cinsindendir (1000 ms = 1 saniye).
setTimeout(() => {
console.log("3 saniye sonra çalıştı!");
}, 3000);
Yukarıdaki kod, 3 saniye sonra console.log fonksiyonunu çalıştırır. Bu tür gecikmeli işlemler, kullanıcıya bilgi vermek veya bir animasyonu başlatmak gibi görevlerde oldukça işlevseldir.
Avantajları:
- Kodların zamanlamayla kontrol edilmesini sağlar
- Asenkron programlama mantığını destekler
setInterval ile Döngüsel İşlemler
setInterval(), belirli aralıklarla aynı işlemi tekrar eder. Özellikle sayaçlar, otomatik veri güncellemeleri ve animasyonlar için tercih edilir.
let count = 0;
let interval = setInterval(() => {
count++;
console.log("Tekrar sayısı:", count);
if (count === 5) clearInterval(interval);
}, 1000);
Bu kod parçası, her 1 saniyede bir çalışarak count değişkenini artırır ve 5’e ulaştığında işlemi durdurur. Böylece zaman bazlı kontrollü döngüler elde edilir.
Kullanım Alanları:
- Canlı saat uygulamaları
- Otomatik veri yenileme
- Banner veya slider geçişleri
clearTimeout ve clearInterval ile İşlemleri Durdurma
Bazı durumlarda zamanlayıcıyı durdurmak gerekir. Bunun için clearTimeout() ve clearInterval() fonksiyonları kullanılır. Bunlar, setTimeout veya setInterval fonksiyonlarının dönüş değeriyle birlikte çağrılır
let timeoutID = setTimeout(() => {
console.log("Bu kod çalışmayacak");
}, 5000);
clearTimeout(timeoutID); // timeout durduruldu
Benzer şekilde clearInterval() ile döngüsel işlemler durdurulabilir.
Zamanlayıcılar ile İlgili İpuçları
- Milisaniye cinsinden süre verirken dikkatli olun; büyük değerler kullanıcı deneyimini bozabilir.
- setTimeout, sadece bir kez çalışır; tekrarlamak için setInterval tercih edilmelidir.
- Tarayıcı arka planda çalışırken zamanlayıcılar gecikebilir.
- Kodun kontrolünü kaybetmemek için zamanlayıcıların ID’leri dikkatle yönetilmelidir.
Javascript zamanlayıcılar
JavaScript zamanlayıcılar, özellikle etkileşimli uygulamalar geliştiren yazılımcılar için olmazsa olmaz konular arasındadır. setTimeout ve setInterval fonksiyonlarıyla kullanıcıya daha dinamik bir deneyim sunabilir, zamanlama bazlı mantıklar kurabilirsiniz. Özellikle SPA (Single Page Application) mimarilerde bu tür zamanlayıcı yapılar sıkça tercih edilir. JavaScript öğreniminde bu temel araçları doğru kavramak, ileri seviye programlamaya geçişte büyük kolaylık sağlar.
Sık Sorulan Sorular
setTimeout ve setInterval farkı nedir?
setTimeout sadece bir kez çalışır, setInterval ise belirli aralıklarla aynı işlemi tekrar eder.
Zamanlayıcılar asenkron mudur?
Evet, zamanlayıcılar JavaScript’in asenkron yapısıyla uyumludur ve Event Loop üzerinden işler.
Bir zamanlayıcıyı nasıl durdurabilirim?
clearTimeout veya clearInterval kullanarak zamanlayıcılar durdurulabilir.
Zamanlayıcılar performansı etkiler mi?
Aşırı kullanıldığında evet. Gereksiz veya hatalı setInterval kullanımı tarayıcıyı yavaşlatabilir.
Zamanlayıcı ID’si nedir?
setTimeout veya setInterval çalıştırıldığında geriye bir ID döner. Bu ID ile işlemi durdurabilirsiniz.
setTimeout içindeki kod ne zaman çalışır?
Belirtilen süre (milisaniye) geçtikten sonra, Event Queue’ya girer ve sıraya göre çalışır.
Sonuç
JavaScript zamanlayıcılar, front-end geliştiriciler için güçlü araçlardır. Hem etkileşim artırmak hem de kontrolü zaman bazlı yönetmek için kullanılırlar. Bu yapıları öğrenmek, gerçek dünya projelerinde size büyük avantaj sağlayacaktır.
