Phương thức setInterval() của Window

Định nghĩa và cách sử dụng

setInterval() phương thức với khoảng thời gian xác định (bằng mili giây).

setInterval() Phương thức này sẽ gọi hàm周期性地 clearInterval() hoặc đóng cửa sổ.

Chú thích:1 giây = 1000 mili giây.

Lưu ý

Để chỉ thực thi hàm một lần, hãy thay đổi bằng setTimeout() phương thức.

Để xóa interval, hãy sử dụng setInterval() ID trả về:

myInterval = setInterval(function, milliseconds);

Sau đó bạn có thể gọi clearInterval() để dừng việc thực thi:

clearInterval(myInterval);

Xem thêm:

Phương thức clearInterval()

Phương thức setTimeout()

Phương thức clearTimeout()

Mô hình

Ví dụ 1

Hiển thị "Hello" mỗi giây (1000 mili giây):

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

Thử ngay

Ví dụ 2

Gọi displayHello mỗi giây:

setInterval(displayHello, 1000);

Thử ngay

Cung cấp thêm các ví dụ ở dưới cùng của trang.

Cú pháp

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

Tham số

Tham số Mô tả
function Bắt buộc. Hàm cần thực thi
milliseconds

Bắt buộc. Khoảng cách thực thi.

Nếu giá trị nhỏ hơn 10, hãy sử dụng 10.
param1, param2, ...

Tùy chọn. Các tham số bổ sung được truyền vào hàm.

IE9 và các phiên bản sớm hơn không hỗ trợ.

Giá trị trả về

Loại Mô tả
Số

ID bộ đếm thời gian.

Vui lòng gán id này với clearInterval() Sử dụng cùng nhau để hủy bỏ bộ đếm thời gian.

Trình duyệt hỗ trợ

Tất cả các trình duyệt đều hỗ trợ setInterval()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support Support Support Support Support Support

More examples

Ví dụ 3

Hiển thị thời gian như đồng hồ đeo tay:

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

Thử ngay

Ví dụ 4

Dừng đồng hồ đếm bằng cách sử dụng clearInterval():

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

Thử ngay

Ví dụ 5

Tạo thanh tiến trình động bằng cách sử dụng setInterval() và 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 + '%';
    }
  }
}

Thử ngay

Ví dụ 6

Chuyển đổi giữa hai màu nền mỗi 500 miligam:

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

Thử ngay

Ví dụ 7

Chuyển đổi tham số cho hàm (không hoạt động trên IE9 và các phiên bản trước):

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

Thử ngay

Nhưng, nếu bạn sử dụng hàm ẩn danh, nó sẽ hoạt động trên tất cả các trình duyệt:

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

Thử ngay