Bagaimana Cara Menghentikan "setInterval()" JavaScript?

Dibuat
·
Diperbarui
·
Dilihat18 kali
0

Saya memiliki elemen countdown yang kontennya adalah angka yang meningkat 1 setiap detik menggunakan setInterval(). Saya ingin menghentikan peningkatan angka tersebut atau menghapus setInterval() ketika tombol stop diklik, bagaimana caranya ya?

Ini kode yang saya pakai:

<div>
  <div id="countdown">0</div>
  <button id="stop">stop</button>
</div>

<script>
  const stopBtn = document.getElementById("stop");

  setInterval(() => {
    const countdown = document.getElementById("countdown");
    const countdownValue = Number(countdown.innerText) + 1;
    countdown.innerText = countdownValue;
  }, 1000);
</script>
JavaScript
1 Jawaban
0

setInterval() mengembalikan angka/id, kita bisa menampung id ini kedalam variabel, kemduain gunakan fungsi clearInterval(id) untuk menghentikan, seperti ini:

<div>
  <div id="countdown">0</div>
  <button id="stop">stop</button>
</div>

<script>
  const interval = setInterval(() => {
    const countdown = document.getElementById("countdown");
    const countdownValue = Number(countdown.innerText) + 1;
    countdown.innerText = countdownValue;
  }, 1000);

  const stopBtn = document.getElementById("stop");
  stopBtn.addEventListener("click", () => {
    clearInterval(interval);
  });
</script>
Dibuat
·
Diperbarui

Kamu tau jawabannya?

Ayo bergabung bersama lebih dari 200.000 pengguna lainnya!

Pertanyaan Terkait