Zamanlayıcı temizleme
Bir öğe kaldırıldığında zamanlayıcıyı temizleyerek bellek sızmasını önlemeyi öğrenirsin.
Bellek sızıntısı ve temizlik
Bir öğe sayfadan kaldırılsa bile üzerindeki zamanlayıcı çalışmaya devam edebilir. Bu, gereksiz bellek kullanımına yani bellek sızıntısına yol açar. Zamanlayıcıyı durdurmak için kimliğini saklamalı ve uygun anda clearInterval ya da clearTimeout çağırmalısın.
const id = setInterval(() => {
console.log('Çalışıyor');
}, 1000);
// öğe kalkınca:
clearInterval(id);Burada id saklanır ve öğe kaldırıldığında clearInterval(id) ile temizlik yapılır. Aksi halde callback, artık var olmayan öğeye erişmeye çalışır.
Olay işleyici içinde temizlik
Zamanlayıcı temizliğini olay işleyiciler içinde yapabilirsin. Örneğin bir durdurma butonuna tıklanınca clearInterval çağırırsın. Böylece kullanıcı zamanlayıcıyı istediği an durdurur.
const id = setInterval(() => {
console.log('Çalışıyor');
}, 500);
stopBtn.addEventListener('click', () => {
clearInterval(id);
});Burada butona her tıklamada clearInterval(id) çağrılır ve zamanlayıcı durur. Aynı örüntü requestAnimationFrame için de geçerlidir; durdurmak istediğin an cancelAnimationFrame kullanırsın.
Uygulama Butona tıklanınca interval'i durdur
Aşağıdaki setInterval'e bir durdurma butonu ekle: #stop butonuna tıklanınca clearInterval(id) çağrılsın.
Örnek çözümü göster
const stopBtn = document.querySelector('#stop');
let count = 0;
const id = setInterval(() => {
count = count + 1;
console.log(count);
}, 500);
stopBtn.addEventListener('click', () => {
clearInterval(id);
});Kendini test et
-
Aşağıdakilerden hangisi bellek sızıntısına yol açar?
- setInterval'in kimliğini saklamak
- clearInterval çağırmamak
- const yerine let kullanmak
- arrow fonksiyon kullanmak
Cevabı göster
clearInterval çağırmamak — Doğru! clearInterval çağrılmazsa zamanlayıcı çalışmaya devam eder ve bellek sızar.
-
Temizlik satırını tamamla
const id = setInterval(() => { counter.textContent = count; }, 1000); // öğe kaldırıldığında: ____(id);Cevabı göster
const id = setInterval(() => { counter.textContent = count; }, 1000); // öğe kaldırıldığında: clearInterval(id); -
Temizlik örüntülerini eşleştir
- clearInterval(id)
- tekrarlı zamanlayıcıyı durdurur
- clearTimeout(id)
- tek seferlik zamanlayıcıyı iptal eder
- cancelAnimationFrame(id)
- animasyon karesini iptal eder
- stopBtn.addEventListener('click', ...)
- butona tıklanınca temizlik yapar