Cửa sổ setInterval()
Ví dụ
Hiển thị "Xin chào" mỗi giây (1000 mili giây):
setInterval(function () {element.innerHTML += "Hello"}, 1000);
Hãy tự mình thử »Hiển thị cuộc gọiXin chào mỗi giây:
setInterval(displayHello, 1000);
Hãy tự mình thử »Thêm ví dụ dưới đây.
Sự miêu tả
Phương thức setInterval()
gọi hàm theo các khoảng thời gian được chỉ định (tính bằng mili giây).
Phương thức setInterval()
tiếp tục gọi hàm cho đến khi clearInterval()
được gọi hoặc cửa sổ được đóng lại.
1 giây = 1000 mili giây.
Ghi chú
Để thực thi hàm chỉ một lần, thay vào đó hãy sử dụng phương thức setTimeout()
.
Để xóa một khoảng thời gian, hãy sử dụng id được trả về từ setInterval():
myInterval = setInterval( function , milliseconds );
Sau đó, bạn có thể dừng việc thực thi bằng cách gọi clearInterval():
clearInterval(myInterval);
Xem thêm:
Cú pháp
setInterval( function, milliseconds, param1, param2, ... )
Thông số
Parameter | Description |
function | Required. The function to execute |
milliseconds | Required. The execution interval. If the value is less than 10, 10 is used |
param1, param2, ... | Optional. Additional parameters to pass to the function Not supported in IE9 and earlier. |
Giá trị trả về
Kiểu | Sự miêu tả |
Một số | Id của bộ đếm thời gian. Sử dụng id này với clearInterval() để hủy bộ hẹn giờ. |
Thêm ví dụ
Ví dụ
Hiển thị thời gian như đồng hồ kỹ thuật số:
setInterval(myTimer, 1000);
function myTimer()
{
const date = new Date();
document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}
Hãy tự mình thử »Ví dụ
Sử dụng clearInterval() để dừng đồng hồ kỹ thuật số:
const myInterval = setInterval(myTimer, 1000);
function myTimer() {
const date = new Date();
document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}
function myStopFunction()
{
clearInterval(myInterval);
}
Hãy tự mình thử »Ví dụ
Sử dụng setInterval() và clearInterval() để tạo thanh tiến trình động:
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 + '%';
}
}
}
Hãy tự mình thử »Ví dụ
Chuyển đổi giữa hai màu nền cứ sau 500 mili giây:
const myInterval = setInterval(setColor, 500);
function setColor() {
let x = document.body;
x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
}
function stopColor() {
clearInterval(myInterval);
}
Hãy tự mình thử »Ví dụ
Truyền tham số cho hàm (không hoạt động trong IE9 trở về trước):
setInterval(myFunc, 2000, "param1", "param2");
Hãy tự mình thử »Tuy nhiên, nếu bạn sử dụng chức năng ẩn danh thì nó hoạt động trong tất cả các trình duyệt:
setInterval(function() {myFunc("param1", "param2")}, 2000);
Hãy tự mình thử »Hỗ trợ trình duyệt
setInterval()
được hỗ trợ trong tất cả các trình duyệt:
Chrome | Edge | Firefox | Safari | Opera | IE |
Yes | Yes | Yes | Yes | Yes | Yes |