Özet - Zamanlayıcılar

setInterval ile bir geri sayım sayacı ve requestAnimationFrame ile basit bir animasyon yazarsın.

Özet - Zamanlayıcılar

Bu grupta dört zamanlayıcı API'sini öğrendin. setTimeout bir kez, setInterval sürekli çalıştırır. requestAnimationFrame animasyon için kare kare çağrılır. Hepsini kimlikle durdurursun.

setTimeout(fn, 1000);          // 1 sn sonra bir kez
setInterval(fn, 1000);         // her 1 sn
requestAnimationFrame(fn);     // bir sonraki kare
clearInterval(id);             // durdur

Kimlikleri saklamak ve gerektiğinde temizlik yapmak, bellek sızıntısını önler. Şimdi iki mini görevle bunları birleştirelim.

Uygulama 10'dan geri sayan sayaç yap

Bir #counter öğesinde 10'dan geri say. setInterval ile her saniye seconds'ü 1 azalt, counter.textContent'e yaz ve 0 olunca clearInterval ile durdur.

Örnek çözümü göster

const counter = document.querySelector('#counter');
let seconds = 10;
counter.textContent = seconds;
const id = setInterval(() => {
  seconds = seconds - 1;
  counter.textContent = seconds;
  if (seconds === 0) {
    clearInterval(id);
  }
}, 1000);

Uygulama Öğeyi yavaşça soluklaştır

Bir .fade öğesini requestAnimationFrame ile soluklaştır. Her karede opacity'yi 0.01 azalt ve fade.style.opacity'e yaz.

Örnek çözümü göster

const fade = document.querySelector('.fade');
let opacity = 1;
function fadeOut() {
  opacity = opacity - 0.01;
  fade.style.opacity = opacity;
  requestAnimationFrame(fadeOut);
}
requestAnimationFrame(fadeOut);

Kendini test et

Bir öğeyi 60 kare/saniye akıcı şekilde hareket ettirmek için en iyi seçenek hangisidir?
- requestAnimationFrame ile özyinelemeli döngü
- setInterval her 16 ms
- setTimeout zinciri
- console.log döngüsü
Cevabı göster

requestAnimationFrame ile özyinelemeli döngü — Doğru! requestAnimationFrame tarayıcının kare ritmine uyar; en akıcı animasyonu verir.
API'leri kullanım amaçlarıyla eşleştir

setTimeout

gecikmeli tek çağrı
setInterval

tekrarlı çağrı
requestAnimationFrame

akıcı animasyon
clearInterval

tekrarlı zamanlayıcıyı durdurma

Sıradaki ders: Callback fonksiyonlar

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler