Trong phát triển web, kiểm soát thời gian thực thi của mã JavaScript là rất quan trọng. Hàm setTimeout() là công cụ mạnh mẽ giúp trì hoãn thực thi đoạn mã và thiết lập các hành động sau một khoảng thời gian nhất định. Trong bài viết này, VietnamWorks inTECH sẽ hướng dẫn bạn cách sử dụng setTimeout() để thiết lập Timer trong JavaScript và mô phỏng chức năng "sleep". 

1. Cách sử dụng setTimeout() trong JavaScript

Phương pháp setTimeout() này cho phép bạn thực thi một đoạn code sau một khoảng thời gian nhất định. Bạn có thể coi phương pháp này như một cách đặt đồng hồ hẹn giờ để chạy mã JavaScript vào một thời điểm nhất định.

Ví dụ: code bên dưới sẽ in "Hello World" ra console JavaScript sau 2 giây trôi qua:

setTimeout(function(){
    console.log("Hello World");
}, 2000);

console.log("setTimeout() example...");

Đoạn code trên trước tiên sẽ in "setTimeout() example..." ra console, sau đó in "Hello World" sau khi hai giây trôi qua kể từ khi code được thực thi bởi JavaScript.

Cú pháp của phương thức setTimeout() như sau:

setTimeout(function, milliseconds, parameter1, parameter2, ...);

Tham số đầu tiên của phương thức setTimeout() là JavaScript function mà bạn muốn thực thi. Bạn có thể viết function trực tiếp khi truyền nó hoặc bạn cũng có thể tham khảo một hàm được đặt tên như dưới đây:

function greeting(){
  console.log("Hello World");
}

setTimeout(greeting);

Tiếp theo, bạn có thể truyền tham số milliseconds, đây sẽ là khoảng thời gian mà JavaScript sẽ đợi trước khi thực thi code.

Một giây bằng một nghìn mili giây, vì vậy nếu bạn muốn đợi 3 giây, bạn cần chuyển 3000 làm đối số thứ hai:

function greeting(){
  console.log("Hello World");
}

setTimeout(greeting, 3000);

Nếu bạn bỏ qua tham số thứ hai, thì setTimeout() sẽ ngay lập tức thực thi thông số đã truyền function mà không cần chờ đợi gì cả.

Cuối cùng, bạn cũng có thể truyền các tham số bổ sung cho phương thức setTimeout() mà bạn có thể sử dụng bên trong function như sau:

function greeting(name, role){
  console.log(`Hello, my name is ${name}`);
  console.log(`I'm a ${role}`);
}

setTimeout(greeting, 3000, "Nathan", "Software developer");

Bây giờ bạn có thể đang nghĩ, "tại sao không chuyển trực tiếp các tham số vào hàm?"

Điều này là do nếu bạn truyền các tham số trực tiếp như thế này:

setTimeout(greeting("Nathan", "Software developer"), 3000);

Sau đó, JavaScript sẽ thực thi ngay lập tức function mà không cần chờ đợi, vì bạn đang chuyển một lệnh gọi hàm chứ không phải tham chiếu hàm làm tham số đầu tiên.

Đây là lý do tại sao nếu bạn cần truyền bất kỳ tham số nào cho hàm, bạn cần truyền chúng từ phương thức setTimeout().

2. Cách hủy phương thức setTimeout

Bạn cũng có thể ngừng phương thức setTimeout() thực thi function bằng cách sử dụng phương thức clearTimeout().

Phương thức này yêu cầu id trả về bởi setTimeout() để biết phương thức setTimeout() nào cần hủy:

clearTimeout(id);

Đây là một ví dụ về phương pháp clearTimeout() đang hoạt động:

const timeoutId = setTimeout(function(){
    console.log("Hello World");
}, 2000);

clearTimeout(timeoutId);
console.log(`Timeout ID ${timeoutId} has been cleared`);

Nếu bạn có nhiều phương thức setTimeout() thì bạn cần lưu ID được trả về bởi mỗi lệnh gọi phương thức, sau đó gọi phương thức clearTimeout() đó nhiều lần nếu cần để xóa tất cả.

Lời kết

Qua bài viết này, VietnamWorks inTECH hy vọng bạn đã nắm được cách sử dụng setTimeout() để thiết lập Timer và mô phỏng chức năng "sleep" trong JavaScript. Việc hiểu và áp dụng các kỹ thuật này sẽ giúp bạn quản lý thời gian thực thi và tối ưu hóa ứng dụng của mình hiệu quả hơn. Nếu thấy bài viết hữu ích, đừng quên chia sẻ cho bạn bè cùng biết nhé!

VietnamWorks inTECH