Metode Window setInterval()

Definisi dan penggunaan

setInterval() metode untuk menentukan kejadian dengan kejadian (dalam miliseconds).

setInterval() Metode akan memanggil fungsi secara periodik sehingga dipanggil clearInterval() atau tutup tingkap.

Komen:1 saat = 1000 miliseconds.

Pemberitahuan

Untuk melaksanakan fungsi sekali, gunakan setTimeout() metode.

Untuk membuang pemilihan waktu, gunakan setInterval() ID yang dipulangkan:

myInterval = setInterval(function, milliseconds);

Lalu anda boleh melengkapkan melalui panggilan clearInterval() untuk berhenti melaksanakan:

clearInterval(myInterval);

Lihat juga:

Metode clearInterval()

Metode setTimeout()

Metode clearTimeout()

Contoh

Contoh 1

Tunjukkan "Hello" setiap detik (1000 miliseconds):

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

Cuba sendiri

Contoh 2

Panggil displayHello setiap detik:

setInterval(displayHello, 1000);

Cuba sendiri

Lebih banyak contoh disediakan di bawah halaman.

Sintaks

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

Parameter

Parameter Penerangan
function Diperlukan. Fungsi yang akan dilaksanakan
milliseconds

Diperlukan. Tempoh pelaksanaan.

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

Pilihan. Parameter tambahan yang disampaikan kepada fungsi.

IE9 dan versi sebelumnya tidak mendukung.

Kembali nilai

Jenis Penerangan
Nombor

ID pemilihan waktu.

Sila hubungkan id ini dengan clearInterval() Gunakan bersama-sama untuk membatalkan pemilihan waktu.

Pelayar web mendukung

Semua pelayar web mendukung setInterval()：

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

Lebih banyak contoh

Contoh 3

Tunjukkan waktu seperti jam digital:

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

Cuba sendiri

Contoh 4

Hentikan 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);
}

Cuba sendiri

Contoh 5

Buat bahan kemajuan dinamik 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 + '%';
    }
  }
}

Cuba sendiri

Contoh 6

Beralih warna latar belakang setiap 500 milidetik:

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

Cuba sendiri

Contoh 7

Lengkapkan parameter kepada fungsi (tidak berfungsi di IE9 dan versi yang lebih awal):

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

Cuba sendiri

Namun, jika anda menggunakan fungsi aneh, ia sesuai untuk semua pelayar:

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

Cuba sendiri