setInterval() trong JavaScript

Định nghĩa

Phương thức setInterval() gọi một hàm hoặc đánh giá một biểu thức sau một khoảng thời gian xác định (tính bằng mili giây). Tuy nhiên, số lần gọi hàm là liên tục, nó sẽ thực hiện lặp đi lặp lại cho đến khi phương thức clearInterval() được gọi hoặc cửa sổ bị đóng (tải lại trang).

Đơn vị: 1000 ms = 1 giây

Mẹo: Để gọi hàm 1 lần duy nhất sau một số mili giây được chỉ định, hãy sử dụng phương thức setTimeout().

Cú pháp

setInterval(function, milliseconds, param1, param2, ...)Code language: JavaScript (javascript)

Trong đó:

Tham số	Mô tả
function	Bắt buộc. Cần có hàm để thực thi
milliseconds	Bắt buộc. Khoảng thời gian (tính bằng mili giây) về tần suất thực thi mã. Nếu giá trị nhỏ hơn 10, giá trị 10 được sử dụng
param1, param2, …	Không bắt buộc. Các tham số cần truyền vào hàm

Ví dụ

Ví dụ 1: Hiển thị thông báo “Hello!” sau mỗi 3 giây (Tải lại trang để kết thúc)

var myVar;

function myFunction() {
  myVar = setInterval(alertFunc, 3000);
}

function alertFunc() {
  alert("Hello!");
}Code language: JavaScript (javascript)

Ví dụ 2: Hiển thị thời gian hiện tại giống như đồng hồ kỹ thuật số

var myVar = setInterval(myTimer, 1000);

function myTimer() {
  var d = new Date();
  var t = d.toLocaleTimeString();
  document.getElementById("demo").innerHTML = t;
}Code language: JavaScript (javascript)

Ví dụ 3: Chuyển đổi giữa hai màu nền cứ sau 300 mili giây một lần

var myVar = setInterval(setColor, 300);

function setColor() {
  var x = document.body;
  x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
}

function stopColor() {
  clearInterval(myVar);
}Code language: JavaScript (javascript)

Kết luận

Như vậy, phương thức setInterval() sẽ thực thi hàm lặp đi lặp lại cho đến khi phương thức clearInterval() được gọi hoặc cửa sổ bị đóng (tải lại trang). Để tìm hiểu rõ hơn về phương thức clearInterval(), mời bạn truy cập clearInterval() trong JavaScript.

Xem thêm:

• clearInterval() trong JavaScript
• setTimeout() trong JavaScript
• clearTimeout() trong JavaScript

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

---

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.