Hàm clearInterval() trong JavaScript

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

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

Hàm clearInterval() trong JavaScript dùng để chạy hàm setInterval lần đầu tiên sau đó hủy không cho chạy nữa, lúc này thông báo sẽ chỉ hiện một lần đầu tiên.

Code Hàm clearInterval() trong JavaScript

<script>
function loiChao() {
 alert("Xin chào!");
 // Hủy setInterval sau lần hiện đầu tiên
 clearInterval(bienit);
}
// 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
var bienit = setInterval(loiChao, 3000);
</script>

Kết quả hiện hộp thoại lần đầu tiên và hủy ngay sau đó:

Xin chào!
    
      OK

Chạy Thử

Cách sử dụng hàm clearInterval() trong JavaScript hiệu quả

clearInterval() phát huy tác dụng khi chương trình cần chủ động kết thúc một tác vụ được lặp lại bởi setInterval(). Để dừng đúng bộ hẹn giờ, cần lưu giá trị định danh mà setInterval() trả về và truyền giá trị này vào clearInterval().

Hủy setInterval() bằng biến lưu mã định danh

Khi gọi setInterval(), JavaScript trả về một mã định danh cho bộ hẹn giờ. Có thể lưu mã này vào biến rồi dùng nó với clearInterval() khi muốn dừng quá trình lặp.

const intervalId = setInterval(() => {
    console.log("Đang thực hiện...");
}, 1000);

clearInterval(intervalId);

Cách làm này giúp xác định chính xác bộ hẹn giờ cần hủy, đặc biệt khi một trang có nhiều setInterval() hoạt động cùng lúc. Không nên gọi clearInterval() với một biến không chứa đúng mã định danh của bộ hẹn giờ cần dừng.

Dừng bộ đếm thời gian khi đạt điều kiện

Trong thực tế, tác vụ lặp thường không cần chạy mãi. Có thể kiểm tra một điều kiện trong hàm callback và gọi clearInterval() ngay khi điều kiện đó được đáp ứng.

let count = 0;

const intervalId = setInterval(() => {
count++;
console.log(`Lần chạy: ${count}`);

```
if (count >= 5) {
    clearInterval(intervalId);
}
```

}, 1000);

Ví dụ trên cho phép đoạn mã thực hiện tối đa 5 lần rồi tự dừng. Mô hình này phù hợp với các bộ đếm, quá trình cập nhật dữ liệu theo chu kỳ hoặc những tác vụ chỉ cần lặp trong một khoảng thời gian nhất định.

Kết hợp clearInterval() với sự kiện người dùng

clearInterval() cũng có thể được gọi khi người dùng thực hiện một hành động cụ thể như nhấn nút dừng. Cách này giúp người dùng kiểm soát một tác vụ đang chạy thay vì phải chờ chương trình tự kết thúc.

let intervalId = setInterval(() => {
    console.log("Tác vụ đang chạy...");
}, 1000);

document.querySelector("#stop").addEventListener("click", () => {
clearInterval(intervalId);
});

Với cách triển khai này, bộ hẹn giờ được tạo một lần và mã định danh được giữ lại để có thể sử dụng khi cần. Sau khi clearInterval() được gọi, các lần thực thi tiếp theo của bộ hẹn giờ sẽ được ngăn lại.

Lời kết

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