Metode Window setInterval()

Definisi dan penggunaan

setInterval() dipanggil metode untuk memanggil fungsi dengan jeda waktu yang ditentukan (dalam milidetik).

setInterval() Metode ini akan memanggil fungsi periodik sampai clearInterval() atau tutup jendela.

Komentar:1 detik = 1000 milidetik

Peringatan

Untuk melaksanakan fungsi sekali, gunakan setTimeout() metode.

Untuk membersihkan interval, gunakan setInterval() ID yang kembali:

myInterval = setInterval(function, milliseconds);

Lalu Anda dapat melakukannya dengan memanggil clearInterval() untuk berhenti melaksanakan:

clearInterval(myInterval);

Lihat pula:

Metode clearInterval()

Metode setTimeout()

Metode clearInterval()

Contoh

Contoh 1

Tampilkan "Hello" setiap detik (1000 milidetik):

setInterval(function () {element.innerHTML += "Hello"}, 1000);

Coba Sendiri

Contoh 2

Panggil displayHello setiap detik:

setInterval(displayHello, 1000);

Coba Sendiri

Beberapa contoh disediakan di bawah halaman

Sintaks

setInterval(function, milliseconds, param1, param2, ...)

Parameter

Parameter Deskripsi
function Wajib. Fungsi yang akan dieksekusi
milliseconds

Wajib. Jeda pelaksanaan

Jika nilai kurang dari 10, gunakan 10
param1, param2, ...

Pilihan. Parameter tambahan yang diberikan ke fungsi

IE9 dan versi sebelumnya tidak mendukung

Nilai kembalian

Tipe Deskripsi
Angka

ID pemrograman jam

Silakan taruh id ini dengan clearInterval() Gunakan bersama-sama untuk membatalkan pemrograman jam

Peramban mendukung

Seluruh peramban mendukung setInterval()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Dukungan Dukungan Dukungan Dukungan Dukungan Dukungan

Beberapa contoh lain

Contoh 3

Tampilkan waktu seperti jam digital:

setInterval(myTimer, 1000);
function myTimer() {
  const date = new Date();
document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}

Coba Sendiri

Contoh 4

Berhenti jam digital menggunakan clearInterval():

const myInterval = setInterval(myTimer, 1000);
function myTimer() {
  const date = new Date();
  document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}
function myStopFunction() {
  clearInterval(myInterval);
}

Coba Sendiri

Contoh 5

Membuat progress bar dinamis menggunakan setInterval() dan clearInterval():

function move() {
  const element = document.getElementById("myBar");
  let width = 0;
  let id = setInterval(frame, 10);
  function frame() {
    if (width == 100) {
      clearInterval(id);
    } else {
      width++;
      element.style.width = width + '%';
    }
  }
}

Coba Sendiri

Contoh 6

Berganti warna latar belakang setiap 500 milidetik antara dua warna:

const myInterval = setInterval(setColor, 500);
function setColor() {
  let x = document.body;
  x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
}
function stopColor() {
  clearInterval(myInterval);
}

Coba Sendiri

Contoh 7

Pesan parameter ke fungsi (tidak berlaku di IE9 dan versi sebelumnya):

setInterval(myFunc, 2000, "param1", "param2");

Coba Sendiri

Namun, jika Anda menggunakan fungsi anonim, ia berlaku untuk semua browser:

setInterval(function() {myFunc("param1", "param2")}, 2000);

Coba Sendiri