Hàm setInterval() trong JavaScript

• Trần Thị Vân
• 1185
• 24/08/2025

Chức năng của Hàm setInterval() trong JavaScript

Hàm setInterval() trong JavaScript dùng để hiện một function thông báo hoặc popup, cứ sau mỗi số giây quy định thì nó sẽ hiện, nó lặp lại theo số giây mãi mãi.

Cú pháp của Hàm setInterval() trong JavaScript

setInterval(tenfunction, somiligiaylap);

tenfunction: Gọi tới 1 function có tên này.

somiligiaylap: Số mili giây mỗi lần lặp lại function, 3 giây bằng 3000.

Code Hàm setInterval() trong JavaScript

<script>
function loiChao() {
 alert("Xin chào!");
}
// Tạo function riêng rồi nhúng tên function đó và hàm setInterval, ở đây mình xét thời gian chờ là 3 giây, cứ sau mỗi 3 giây sẽ hiện thông báo, nếu bạn tắt đi thì 3 giây sau nó hiện lại
setInterval(loiChao, 3000);

// Hoặc nhúng trực tiếp function vào setInterval, ở đây mình tạm ẩn
//setInterval(function loiChao() {
//alert("Xin chào!");
//}, 3000);

</script>

Kết quả hiện hộp thoại:

Xin chào!

      OK

Chạy Thử

Ứng dụng của hàm setInterval() trong JavaScript

Hàm setInterval() phù hợp với những tác vụ cần được thực hiện lặp lại theo một khoảng thời gian cố định. Trong website, hàm này thường được dùng để cập nhật giao diện, theo dõi thời gian hoặc tạo các hoạt động tự động mà không cần người dùng liên tục thao tác.

Tạo đồng hồ đếm thời gian bằng setInterval()

Một ứng dụng quen thuộc của setInterval() là tạo đồng hồ hiển thị thời gian thực. Sau mỗi khoảng thời gian ngắn, JavaScript lấy thời gian mới và cập nhật lại nội dung trên trang.

Ví dụ dưới đây cập nhật đồng hồ sau mỗi giây:

const clock = document.getElementById("clock");

setInterval(() => {
    clock.textContent = new Date().toLocaleTimeString();
}, 1000);

Cách làm này có thể áp dụng cho đồng hồ điện tử, bộ đếm thời gian hoặc các thành phần cần hiển thị thời gian liên tục. Nếu muốn dừng quá trình cập nhật, cần lưu lại giá trị trả về từ setInterval() để kết hợp với clearInterval().

Tự động cập nhật nội dung trên trang web

setInterval() cũng hữu ích khi một khu vực trên trang cần được làm mới định kỳ. Chẳng hạn, website có thể cập nhật số lượng thông báo, trạng thái xử lý hoặc một thông tin thay đổi theo thời gian.

Ví dụ, đoạn mã sau thay đổi nội dung của một phần tử sau mỗi 5 giây:

const status = document.getElementById("status");

setInterval(() => {
    status.textContent = "Dữ liệu đã được cập nhật";
}, 5000);

Trong ứng dụng thực tế, hàm lặp có thể được kết hợp với fetch() để lấy dữ liệu mới từ máy chủ. Tuy nhiên, không nên đặt khoảng thời gian quá ngắn vì việc gửi yêu cầu liên tục có thể làm tăng tải cho trình duyệt và máy chủ.

Tạo hiệu ứng lặp lại với setInterval()

Khi một hiệu ứng cần thay đổi trạng thái nhiều lần theo chu kỳ, setInterval() có thể được sử dụng để điều khiển quá trình lặp. Ví dụ, một dòng chữ có thể được thay đổi luân phiên để tạo hiệu ứng đơn giản:

const message = document.getElementById("message");
const texts = ["Chào mừng bạn", "Khám phá ngay", "Bắt đầu học JavaScript"];

let index = 0;

setInterval(() => {
    message.textContent = texts[index];
    index = (index + 1) % texts.length;
}, 2000);

Cách này thích hợp cho những hiệu ứng đơn giản như thay đổi thông điệp, cập nhật trạng thái hoặc luân phiên nội dung. Với các hiệu ứng chuyển động phức tạp, nên cân nhắc CSS animation hoặc requestAnimationFrame() để kiểm soát hoạt ảnh hiệu quả hơn.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Hàm setInterval() trong JavaScript.