crazy_coder
Moderatör
- Katılım
- 20 Şub 2026
- Mesajlar
- 204
- Tepkime puanı
- 0
- Puanları
- 16
1. setTimeout: Gecikmeli İşlemler
setTimeout, bir kod bloğunun veya fonksiyonun belirlenen süre (milisaniye cinsinden) sadece bir kez çalışmasını sağlar.
[]Kullanım Amacı: Bir işlemin hemen değil, biraz bekledikten sonra gerçekleşmesi (Örn: 3 saniye sonra kaybolan bir uyarı mesajı).
[]Süre: 1000 milisaniye = 1 saniye.
JavaScript:
// 3 saniye sonra çalışacak fonksiyon
const zamanlayici = setTimeout(() => {
console.log("Bu mesaj 3 saniye sonra görüntülendi.");
}, 3000);
// Eğer işlem gerçekleşmeden iptal etmek isterseniz:
// clearTimeout(zamanlayici);2. setInterval: Tekrarlanan İşlemler
setInterval, bir işlemi durdurulana kadar belirlenen zaman aralıklarında sürekli olarak tekrar eder.
[]Kullanım Amacı: Dijital saatler, geri sayım sayaçları veya belirli aralıklarla sunucudan veri çekme işlemleri.
[]İptal Etme: clearInterval kullanılmazsa döngü sonsuza kadar devam eder ve performansı etkiler.
JavaScript:
let sayac = 0;
const dongu = setInterval(() => {
sayac++;
console.log("Geçen süre: " + sayac + " saniye");
// 5. saniyede durduralım
if (sayac === 5) {
clearInterval(dongu);
console.log("Döngü durduruldu.");
}
}, 1000);3. Animasyonlar ve Performans: requestAnimationFrame
Görsel animasyonlar için setInterval veya setTimeout kullanmak bazen takılmalara (stuttering) yol açabilir. Çünkü bu zamanlayıcılar ekranın yenilenme hızıyla (refresh rate) her zaman senkronize olmaz.
Modern Çözüm: Akıcı animasyonlar için tarayıcıyı yormayan requestAnimationFrame metodu tercih edilir.
4. JavaScript'in "Tek İş Parçacığı" (Single-Thread) Yapısı
Önemli bir teknik detay: JavaScript aynı anda iki işi yapamaz. Eğer setTimeout süresini 0 bile yapsanız, o anki diğer işlemler bitmeden zamanlayıcı çalışmaz. Zamanlayıcılar sadece "en erken ne zaman çalışabileceklerini" kuyruğa (Event Loop) eklerler.
JavaScript:
console.log("1. İlk burası");
setTimeout(() => {
console.log("2. Sonra burası (0ms olsa bile)");
}, 0);
console.log("3. Aslında burası daha önce çalışır!");Pratik Forum Uygulaması: Otomatik Kapanan Bildirim
JavaScript:
function bildirimGoster(mesaj) {
const kutu = document.createElement("div");
kutu.className = "bildirim-kutusu";
kutu.innerText = mesaj;
document.body.appendChild(kutu);
// 4 saniye sonra kutuyu sil
setTimeout(() => {
kutu.classList.add("fade-out"); // Görsel efekt
setTimeout(() => kutu.remove(), 500); // Efekt bitince sil
}, 4000);
}
bildirimGoster("Ayarlarınız başarıyla kaydedildi!");Sonuç
Zamanlayıcılar, web sayfalarına dinamizm katan gizli kahramanlardır. setTimeout ile anlık tepkileri geciktirebilir, setInterval ile sürekli güncel kalan sistemler kurabilirsiniz. Ancak her zaman temizlik yapmayı (clear) ve performansı (requestAnimationFrame) göz önünde bulundurmayı unutmayın.