Khái niệm

Hàm setTimeout được sử dụng để thực hiện một hành động sau một khoảng thời gian xác định. Điều này rất hữu ích khi bạn muốn thực hiện một tác vụ nào đó sau một khoảng thời gian chờ đợi.

Cách sử dụng

Cú pháp của hàm setTimeout như sau:

setTimeout(function, milliseconds, param1, param2, ...)

Trong đó:

• function: Một hàm hoặc một biểu thức được thực thi sau khi thời gian chờ đã kết thúc.
• milliseconds: Số milliseconds (1000 milliseconds = 1 giây) để chờ trước khi thực hiện hành động.
• param1, param2, ...: Các tham số tùy chọn cho hàm được gọi.

Ví dụ

Hãy xem một ví dụ đơn giản để hiểu rõ hơn về cách sử dụng setTimeout trong JavaScript:

function sayHello() {
  console.log("Xin chào!");
}

setTimeout(sayHello, 3000);

Trong ví dụ trên, chúng ta khai báo một hàm sayHello để in ra màn hình thông báo “Xin chào!”. Sau đó, chúng ta sử dụng setTimeout để gọi hàm này sau 3000 milliseconds (tương đương với 3 giây). Khi thời gian chờ đã kết thúc, hàm sayHello sẽ được thực thi và thông báo “Xin chào!” sẽ được hiển thị trên console.

Sử dụng tham số

Bạn cũng có thể sử dụng các tham số trong hàm được gọi bởi setTimeout. Dưới đây là một ví dụ:

function greet(name) {
  console.log("Xin chào, " + name + "!");
}

setTimeout(greet, 2000, "John");

Trong ví dụ này, chúng ta khai báo một hàm greet nhận một tham số name. Hàm này sẽ in ra thông báo “Xin chào, “ cộng với tên được truyền vào. Bằng cách sử dụng setTimeout với tham số "John" và thời gian chờ là 2000 milliseconds (tương đương 2 giây), hàm greet sẽ được gọi và thông báo “Xin chào, John!” sẽ được hiển thị trên console sau 2 giây.

Ngừng SetTimeOut

Để ngừng một hàm setTimeout đang đếm ngược, bạn có thể sử dụng hàm clearTimeout. Bạn cần lưu trữ ID của timeout được tạo bằng cách gọi setTimeout và sau đó truyền ID này vào hàm clearTimeout để dừng đếm ngược. Dưới đây là một ví dụ:

function sayHello() {
  console.log("Xin chào!");
}

var timeoutId = setTimeout(sayHello, 3000);

// Ngừng timeout sau 2 giây
setTimeout(function() {
  clearTimeout(timeoutId);
}, 2000);