Zamanlayıcılar ve Planlama
JavaScript’te zamanlayıcılar ve planlama (Timers ve Scheduling), kodun belirli bir süre sonra veya düzenli aralıklarla çalışmasını sağlayan güçlü araçlardır. Bir ev inşa etmeye benzetirsek, duvarları örmeden önce temelin tamamen oturmasını beklemelisiniz. Benzer şekilde, web geliştirmede belirli görevlerin zamanlanması, kullanıcı deneyimini akıcı ve verimli hale getirir.
Kişisel bir web sitesinde, zamanlayıcılar sayfa animasyonlarını gecikmeli olarak göstermek için kullanılabilir. Bir blogda, yorumların veya içeriklerin belirli aralıklarla otomatik güncellenmesini sağlayabilir. E-ticaret sitelerinde, indirim ve kampanya geri sayımları için idealdir. Haber sitelerinde, başlıkların veya içeriklerin sayfa yenilenmeden güncellenmesini sağlar. Bu ders boyunca okuyucular, setTimeout ve setInterval gibi temel fonksiyonları kullanmayı, bunları etkin şekilde yönetmeyi ve hatalardan kaçınmayı öğrenecek.
Kodun verimli çalışması ve gereksiz kaynak kullanımının önlenmesi, zamanlayıcıları yönetmenin temelidir. Bu içerikte, başlangıç seviyesinden ileri seviyeye geçiş yapacak şekilde zamanlayıcıların kurulumu, durdurulması ve gerçek dünya uygulamaları üzerinde durulacaktır. Ayrıca, pratik ipuçları ve hata önleme yöntemleri ile zamanlayıcıları güvenli ve verimli şekilde kullanma becerisi kazandırılacaktır.
Temel Örnek
javascript// Simple countdown timer
let count = 5;
let timer = setInterval(() => {
console.log("Geri sayım: " + count); // Print current count
count--;
if (count < 0) {
clearInterval(timer); // Stop when count is below 0
console.log("Süre doldu!"); // Final message
}
}, 1000); // Run every 1000ms (1 second)Yukarıdaki örnekte, bir geri sayım sayacı oluşturduk. count değişkeni başlangıçta 5 olarak belirlenir ve her saniye bir azalır. setInterval fonksiyonu, belirtilen aralıklarla (1000 ms) callback fonksiyonunu tekrar tekrar çalıştırır.
Callback içinde önce count değeri konsola yazdırılır, ardından count-- ile değer bir azaltılır. Eğer count 0’ın altına düşerse, clearInterval(timer) çağrısı ile interval durdurulur. Bu adım kritik öneme sahiptir; aksi takdirde interval sonsuza kadar çalışmaya devam eder ve gereksiz kaynak tüketir. Son olarak "Süre doldu!" mesajı görüntülenir.
Bu örnek, bir e-ticaret sitesinde kampanya geri sayımı veya blogda içerik güncellemelerini göstermek için temel bir modeldir. Başlangıç seviyesindeki kullanıcıların sık sorduğu soru, clearInterval neden gerekli sorusudur. Cevap: Interval otomatik durmaz, onu durdurmak programcıya aittir.
Pratik Örnek
javascript// Auto-refresh news feed every 10 seconds
function fetchNews() {
console.log("Yeni haberler alınıyor..."); // Simulate API request
// In real projects, fetch("api/news") and update DOM
}
let newsUpdater = setInterval(fetchNews, 10000); // Run every 10s
// Stop refreshing after 1 minute
setTimeout(() => {
clearInterval(newsUpdater);
console.log("Haber güncelleme durduruldu.");
}, 60000);Bu pratik örnek, haber sitesinde başlıkları 10 saniyede bir güncellemek için kullanılır. fetchNews fonksiyonu API çağrısını simüle eder, gerçek projelerde fetch() ile veriler alınır ve DOM güncellenir.
setInterval(fetchNews, 10000) ile fonksiyon her 10 saniyede bir çalıştırılır. Ancak bu işlem süresiz çalışırsa kaynak tüketir ve gereksiz çağrılar oluşturur. Bu nedenle setTimeout kullanılarak 1 dakika sonra interval iptal edilir (clearInterval(newsUpdater) ve konsola bilgi mesajı yazdırılır.
Bloglarda yorum güncellemeleri, e-ticaret sitelerinde stok kontrolü ve haber sitelerinde içerik yenileme için bu teknik uygulanabilir. setInterval ve setTimeout kombinasyonu, tekrarlayan görevleri kontrol etmek ve durdurmak için oldukça etkilidir.
Zamanlayıcılarla ilgili en iyi uygulamalar ve yaygın hatalar:
- Her zaman interval ve timeout ID’lerini saklayın ve gerektiğinde
clearIntervalveyaclearTimeoutile temizleyin. - Modern ve okunabilir kod için arrow functions ve net callback tanımlamaları kullanın.
- API çağrıları gibi işlemlerde hata kontrolü uygulayın (
try...catch). - Performans optimizasyonu için interval sürelerini gereksiz kısa ayarlamayın.
Yaygın hatalar:
- Aktif interval’leri temizlememek → bellek sızıntısı ve performans düşüşü.
- Nested interval kullanmak → çoklu çağrılar ve beklenmedik sonuçlar.
-
Yanlış timer referansı → durdurulamayan interval’ler.
Debug ipuçları: -
console.logile callbacklerin çalışmasını kontrol edin. - Tarayıcı sekmesi arka planda ise throttling uygulayabileceğini unutmayın.
- DevTools ile aktif interval’leri inceleyin.
En iyi pratik, zamanlayıcıları başlatmak ve durdurmak için net bir mantık oluşturmaktır.
📊 Hızlı Referans
| Property/Method | Description | Example |
|---|---|---|
| setTimeout | Belirli süre sonra fonksiyon çalıştırır | setTimeout(() => console.log("Merhaba"), 2000) |
| clearTimeout | setTimeout ile oluşturulan timer’ı iptal eder | clearTimeout(timerId) |
| setInterval | Fonksiyonu belirli aralıklarla tekrarlar | setInterval(() => console.log("tik"), 1000) |
| clearInterval | setInterval ile oluşturulan interval’i iptal eder | clearInterval(intervalId) |
| Date.now | Mevcut zamanı milisaniye cinsinden verir | console.log(Date.now()) |
| requestAnimationFrame | Animasyonları ekran yenilenmeden önce çalıştırır | requestAnimationFrame(drawFrame) |
Özetle, JavaScript’te zamanlayıcılar ve planlama, dinamik ve modern kullanıcı deneyimleri için temel bir araçtır. setTimeout ve setInterval ile aksiyonları zamanlayabilir, clearTimeout ve clearInterval ile kontrol sağlayabilirsiniz.
Zamanlayıcılar, DOM manipülasyonu ve backend ile veri iletişimi için kritik bir rol oynar. Örneğin, bir geri sayım göstermek veya periyodik veri güncellemek için kullanılır.
İleriye dönük olarak, requestAnimationFrame ile animasyon optimizasyonu, Web Workers ile arka plan görevleri, ve async/await ile zamanlayıcı entegrasyonu konularını inceleyebilirsiniz. Küçük projelerle pratik yapmak, örneğin portföy sayfasında saat göstermek veya e-ticaret kampanya sayacı oluşturmak, öğrenmeyi pekiştirir.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu konudaki anlayışınızı pratik sorularla test edin.
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek