Javascript İle Tarayıcı Tabanlı Bir Dinamik Zamanlayıcı Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Bu projeyi hayata geçirmek için herhangi bir dış kütüphaneye veya sunucu tarafı yazılıma ihtiyacınız yoktur. Tarayıcınızın yerel JavaScript motoru yeterlidir. Çalışma ortamınız için şunlara sahip olmanız yeterlidir:

• Modern bir web tarayıcısı (Chrome, Firefox veya Edge'in güncel sürümleri).
• Kod düzenleyici (VS Code gibi).
• Temel HTML ve DOM (Document Object Model) manipülasyon bilgisi.

Projenizi başlatmak için bir index.html dosyası oluşturun ve içine temel bir yapı yerleştirin. Zamanlayıcının görüneceği bir div etiketi ve kontrol butonları ekleyerek işe başlayacağız.

Temel Zamanlama Fonksiyonları: setTimeout ve setInterval

JavaScript'te zamanlama işlemleri için iki temel fonksiyon kullanılır. setTimeout, belirli bir sürenin sonunda tek seferlik bir işlem yapmak için kullanılırken, setInterval belirli aralıklarla kodun tekrar çalışmasını sağlar. Dinamik bir zamanlayıcı için genellikle setInterval tercih edilir ancak hassas işlemler için requestAnimationFrame daha performanslıdır.

// Basit bir aralıklı sayaç örneği
let saniye = 0;
const zamanlayici = setInterval(() => {
    saniye++;
    console.log("Geçen süre: " + saniye + " saniye");
    if (saniye >= 10) clearInterval(zamanlayici);
}, 1000);

Yukarıdaki kod, her 1000 milisaniyede (1 saniye) bir konsola çıktı verir ve 10. saniyede clearInterval kullanarak işlemi sonlandırır. Bellek sızıntılarını önlemek için her zaman setInterval fonksiyonunu bir değişkene atamalı ve ihtiyaç bittiğinde temizlemelisiniz.

Adım Adım Dinamik Geri Sayım Sayacı Oluşturma

Dinamik bir zamanlayıcı oluştururken, hedef süreyi belirlemek ve mevcut zamanla arasındaki farkı hesaplamak gerekir. Aşağıdaki örnekte, kullanıcıya 60 saniyelik bir geri sayım sunan basit bir yapı kuracağız.

function geriSayimBaslat(saniye) {
    let kalanSure = saniye;
    const ekran = document.getElementById('zaman-ekrani');

    const timer = setInterval(() => {
        kalanSure--;
        ekran.textContent = kalanSure;

        if (kalanSure


Zamanlayıcı Performansını Optimize Etme
Dinamik zamanlayıcılar, özellikle tarayıcı sekmeleri arka plana alındığında performans sorunları yaşayabilir. Tarayıcılar, enerji tasarrufu sağlamak amacıyla arka plandaki sekmelerde setInterval fonksiyonunun çalışma hızını kasıtlı olarak düşürür. Bu durum, zamanlayıcınızın "sapmasına" (drift) neden olur.
Bu sapmayı engellemek için sadece setInterval süresine güvenmek yerine, her döngüde sistem saatini (Date.now()) kontrol eden bir yaklaşım benimsemelisiniz. İşte daha hassas bir zamanlayıcı mantığı:
function hassasZamanlayici(sure) {
    const baslangicZamani = Date.now();
    const hedefZaman = baslangicZamani + (sure * 1000);

    const timer = setInterval(() => {
        const simdi = Date.now();
        const kalan = Math.round((hedefZaman - simdi) / 1000);

        if (kalan  console.log('Çalışıyor...'), 1000);
// İhtiyaç duyulduğunda:
// TimerManager.temizle('geriSayim1');
Bu yapı, uygulamanızın ölçeklenebilirliğini artırır ve beklenmedik zamanlayıcı hatalarının önüne geçer. Özellikle büyük ölçekli projelerde, global bir yönetici kullanmak kodun okunabilirliğini ve bakımını kolaylaştırır.