Ö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); // durdurKimlikleri 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