Hàm clearTimeout() trong JavaScript

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

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

Hàm clearTimeout() trong JavaScript dùng để hủy chức năng hẹn giờ của hàm setTimeout bằng cách đưa biến của hàm setTimeout vào.

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

clearTimeout(bien);

bien: Biến chứa hàm setTimeout.

Code Hàm clearTimeout() trong JavaScript

<script>
function loiChao() {
 alert("Xin chào!");
}

// Đặt biến chứa hàm hẹn giờ
var biento = setTimeout(loiChao, 3000);

// Đưa biến hàm hẹn giờ vào
clearTimeout(biento);
</script>

Kết quả hàm hẹn giờ đã được hủy.

Chạy Thử

Ứng dụng Hàm clearTimeout() trong JavaScript

clearTimeout() phát huy tác dụng khi một tác vụ đã được tạo bằng setTimeout() nhưng không còn cần thực hiện. Việc hủy bộ hẹn giờ đúng lúc giúp chương trình phản hồi theo thao tác thực tế của người dùng, thay vì tiếp tục chạy một hành động đã trở nên không cần thiết.

Hủy tác vụ đã được thiết lập bằng setTimeout()

Để hủy một tác vụ, cần lưu giá trị mà setTimeout() trả về vào một biến, sau đó truyền biến này cho clearTimeout(). Khi đó, hàm được đặt lịch sẽ không được thực thi nếu thời gian chờ chưa kết thúc.

const timer = setTimeout(() => {
    console.log("Tác vụ đã được thực hiện");
}, 3000);

clearTimeout(timer);

Trong ví dụ trên, bộ hẹn giờ được thiết lập trong 3 giây nhưng bị hủy ngay sau đó nên thông báo không xuất hiện. Cách làm này đặc biệt hữu ích khi chương trình cần thay đổi quyết định trước khi thời gian chờ kết thúc.

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

Một ứng dụng thực tế thường cho phép người dùng thay đổi thao tác trước khi bộ hẹn giờ hoàn tất. Khi đó, clearTimeout() có thể được gọi trong một sự kiện để ngăn hành động cũ tiếp tục chạy.

let timer;

function batDau() {
    timer = setTimeout(() => {
        console.log("Thao tác đã được xác nhận");
    }, 3000);
}

function huy() {
    clearTimeout(timer);
}

Ở đây, batDau() tạo một tác vụ chờ, còn huy() có thể dừng tác vụ đó trước khi hết 3 giây. Mô hình này phù hợp với các nút xác nhận, thông báo tự động, thao tác tạm thời hoặc những chức năng cho phép người dùng hủy hành động.

Sử dụng clearTimeout() để kiểm soát thao tác chờ

Khi cần tạo lại một bộ hẹn giờ nhiều lần, nên hủy bộ hẹn giờ cũ trước khi thiết lập bộ mới. Cách này giúp tránh nhiều tác vụ cùng chờ và lần lượt được thực thi ngoài ý muốn.

let timer;

function xuLy() {
    clearTimeout(timer);

    timer = setTimeout(() => {
        console.log("Bắt đầu xử lý");
    }, 1000);
}

Mỗi lần xuLy() được gọi, bộ hẹn giờ trước đó sẽ được loại bỏ rồi mới tạo bộ mới. Đây là cách kiểm soát thời gian chờ hiệu quả khi một hành động có thể xảy ra liên tục và chương trình chỉ nên xử lý sau khi người dùng ngừng thao tác trong một khoảng thời gian nhất định.

Lời kết

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