clearInterval ile durdurma

Bir zamanlayıcıyı clearInterval ve clearTimeout ile durdurmayı öğrenirsin.

Zamanlayıcıyı kimlikle durdurmak

setInterval ve setTimeout bir kimlik (id) döndürür. Bu kimliği bir değişkende saklar ve clearInterval(id) ya da clearTimeout(id) ile zamanlayıcıyı durdurursun.

const id = setInterval(() => {
  console.log('Tik');
}, 1000);
clearInterval(id);

Burada id değişkeni setInterval'in döndürdüğü kimliğidir. clearInterval(id) çağrılınca tekrarlı zamanlayıcı hemen durur. Aynı şekilde clearTimeout(id) henüz çalışmamış bir setTimeout'u iptal eder.

Koşula bağlı durdurma

Bir zamanlayıcıyı belli bir koşulda durdurmak için callback içine bir if yazarsın. Koşul sağlanınca clearInterval çağrılır ve tekrar biter.

let count = 0;
const id = setInterval(() => {
  count = count + 1;
  if (count >= 3) {
    clearInterval(id);
  }
}, 1000);

Bu kod count 3'e ulaşınca zamanlayıcıyı durdurur. id değişkeni callback içinden erişilebilirdir çünkü aynı kapsamda tanımlanmıştır. Böylece sayaç sonsuza dek değil, istediğin yerde durur.

Uygulama Sayaç 3'ü geçince durdur

Aşağıdaki setInterval'i tamamla: count 3'ten büyük olunca clearInterval(id) ile durdur.

Örnek çözümü göster

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

Kendini test et

Hangisi setInterval'i durdurur?
```
const id = setInterval(() => {
  console.log('Tik');
}, 1000);
```
- stopInterval(id)
- pauseTimer(id)
- clearInterval(id)
- endInterval(id)
Cevabı göster

clearInterval(id) — Doğru! clearInterval(id) tekrarlı zamanlayıcıyı durdurur.

clearInterval çağrısını tamamla

const id = setInterval(() => {
  console.log('Tik');
}, 1000);
____(id);

Cevabı göster

const id = setInterval(() => {
  console.log('Tik');
}, 1000);
clearInterval(id);

Fonksiyonları amaçlarıyla eşleştir

setInterval

tekrarlı zamanlayıcı başlatır
clearInterval

tekrarlı zamanlayıcıyı durdurur
setTimeout

tek seferlik zamanlayıcı başlatır
clearTimeout

çalışmamış zamanlayıcıyı iptal eder

Sıradaki ders: requestAnimationFrame

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler