Hàm setTimeout() trong JavaScript

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

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

Hàm setTimeout() trong JavaScript dùng để xét thời gian chờ trước khi xuất hiện kết quả của một function, nó chỉ hiện 1 lần mỗi khi load trang, thường dùng cho function hiện thông báo hoặc popup, bạn có thể tạo function riêng rồi nhúng vào hàm setTimeout hoặc nhúng trực tiếp function vào.

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

setTimeout(tenfunction, thoigiancho);

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

thoigiancho: Số mili giây chờ hiện function, 3 giây bằng 3000.

Code Hàm setTimeout() trong JavaScript

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

// Tạo function riêng rồi nhúng tên function đó và hàm setTimeout, ở đây mình xét thời gian chờ là 3 giây, sau 3 giây sẽ hiện thông báo
setTimeout(loiChao, 3000);

// Hoặc nhúng trực tiếp function vào setTimeout
//setTimeout(function loiChao() {
// alert("Xin chào!");
//}, 3000);
</script>

Kết quả hộp thoại thông báo xuất hiện sau 3 giây:

Xin chào!

       OK

Chạy Thử

Ứng dụng hàm setTimeout() trong JavaScript

setTimeout() phù hợp khi một tác vụ cần được thực hiện sau một khoảng thời gian nhất định thay vì chạy ngay lập tức. Trong thực tế, hàm này thường được dùng để tạo độ trễ cho giao diện, hiển thị thông báo tạm thời hoặc trì hoãn một thao tác mà không làm dừng toàn bộ chương trình.

Hiển thị thông báo sau một khoảng thời gian

Có thể sử dụng setTimeout() để hiển thị thông báo sau khi người dùng thực hiện một hành động. Cách này hữu ích với các thông báo như xác nhận thao tác, hướng dẫn tiếp theo hoặc nhắc người dùng kiểm tra một trạng thái.

setTimeout(function() {
    console.log("Thao tác đã được xử lý.");
}, 2000);

Đoạn mã trên chờ khoảng 2 giây rồi mới thực hiện hàm. Thời gian chờ tính bằng mili giây, vì vậy 2000 tương ứng với 2 giây.

Tạo hiệu ứng trì hoãn khi người dùng thao tác

Trong giao diện web, việc trì hoãn một thao tác có thể giúp trải nghiệm tự nhiên hơn. Chẳng hạn, một phần tử có thể được thay đổi trạng thái sau khi người dùng bấm nút, thay vì cập nhật ngay lập tức.

document.querySelector("button").addEventListener("click", function() {
    setTimeout(function() {
        console.log("Thao tác được thực hiện sau 1 giây.");
    }, 1000);
});

Cách sử dụng này đặc biệt phù hợp với những thao tác cần tạo khoảng chờ ngắn giữa hành động của người dùng và phản hồi từ giao diện.

Tự động thực hiện một chức năng sau thời gian chờ

setTimeout() cũng có thể trì hoãn bất kỳ hàm JavaScript nào. Đây là lựa chọn đơn giản khi một tác vụ chỉ cần chạy một lần sau khoảng thời gian xác định.

function hienThiKetQua() {
    console.log("Kết quả đã sẵn sàng.");
}

setTimeout(hienThiKetQua, 3000);

Trong ví dụ này, hienThiKetQua() không được gọi ngay mà được đưa vào hàng đợi thực thi và chỉ được xử lý sau thời gian chờ. Cách này giúp tách thời điểm gọi hàm khỏi thời điểm thực hiện tác vụ.

Kết hợp setTimeout() với clearTimeout()

Khi cần hủy một tác vụ đã đặt lịch nhưng chưa được thực hiện, có thể kết hợp setTimeout() với clearTimeout(). Trước tiên, lưu giá trị trả về từ setTimeout() vào một biến để sử dụng khi hủy.

const timer = setTimeout(function() {
    console.log("Tác vụ này sẽ không được thực hiện.");
}, 3000);

clearTimeout(timer);

Cách này hữu ích khi lịch thực hiện không còn cần thiết, chẳng hạn người dùng thay đổi lựa chọn hoặc thao tác tiếp theo khiến tác vụ đã lên lịch trở nên không phù hợp.

Lời kết

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