Hướng dẫn này sẽ giúp bạn hiểu cách phương thức JavaScript tích hợp setTimeout() hoạt động với các ví dụ mã trực quan.
Cách sử dụng setTimeout() trong JavaScript
Các setTimeout() phương thức cho phép bạn thực thi một đoạn mã sau một khoảng thời gian nhất định đã trôi qua. Bạn có thể nghĩ về phương pháp này như một cách để đặt hẹn giờ chạy mã JavaScript vào một thời điểm nhất định.
Ví dụ: mã bên dưới sẽ in “Xin chào thế giới” tới bảng điều khiển JavaScript sau 2 giây trôi qua:
setTimeout(function(){
console.log("Hello World");
}, 2000);
console.log("setTimeout() example...");Trước tiên, đoạn mã trên sẽ in “ví dụ setTimeout()…” ra bảng điều khiển, sau đó in “Xin chào thế giới” sau hai giây trôi qua kể từ khi mã được JavaScript thực thi.
Các setTimeout() cú pháp phương thức như sau:
setTimeout(function, milliseconds, parameter1, parameter2, ...);Tham số đầu tiên của setTimeout() phương pháp là một JavaScript function mà bạn muốn thực hiện. Bạn có thể viết function trực tiếp khi chuyển nó hoặc bạn cũng có thể tham khảo một chức năng được đặt tên như bên dưới:
function greeting(){
console.log("Hello World");
}
setTimeout(greeting);Tiếp theo, bạn có thể vượt qua milliseconds tham số, đây sẽ là lượng thời gian mà JavaScript sẽ đợi trước khi thực thi mã.
Một giây bằng một nghìn mili giây nên muốn đợi 3 giây thì cần phải vượt qua 3000 như đố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 hiện thông qua function mà không cần chờ đợi gì cả.
Cuối cùng, bạn cũng có thể chuyển các tham số bổ sung cho setTimeout() phương pháp 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 truyền trực tiếp các tham số cho hàm?”
Điều này là do nếu bạn chuyển các tham số trực tiếp như thế này:
setTimeout(greeting("Nathan", "Software developer"), 3000);Sau đó, JavaScript sẽ ngay lập tức thực thi lệnh function không cần chờ đợi, bởi vì bạn đang vượt qua một gọi hàm và không phải là một chức năng tham chiếu như 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ừ setTimeout() phương pháp.
Nhưng thành thật mà nói, tôi chưa bao giờ thấy cần phải chuyển các tham số bổ sung cho setTimeout() phương pháp với vai trò là Nhà phát triển phần mềm của tôi, vì vậy đừng lo lắng về điều đó 😉
Cách hủy phương thức setTimeout
Bạn cũng có thể ngăn setTimeout() phương thức từ việc thực hiện function bằng cách sử dụng clearTimeout() phương pháp.
Các clearTimeout() phương pháp yêu cầu các id trở lại bởi setTimeout() để biết cái nào setTimeout() phương pháp để hủy bỏ:
clearTimeout(id);Đây là một ví dụ về clearTimeout() phương pháp trong hành độ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 setTimeout() thì bạn cần lưu các ID được trả về bởi mỗi lần gọi phương thức và sau đó gọi clearTimeout() nhiều lần nếu cần để xóa tất cả.
Phần kết luận
JavaScript setTimeout() phương thức là một phương thức tích hợp sẵn cho phép bạn định thời gian thực hiện một công việc nhất định function . Bạn cần vượt qua khoảng thời gian để chờ đợi trong milliseconds có nghĩa là để đợi một giây, bạn cần vượt qua một nghìn milliseconds.
Để hủy một setTimeout() chạy, bạn cần sử dụng clearTimeout() phương thức, chuyển giá trị ID được trả về khi bạn gọi phương thức setTimeout() phương pháp.
Cảm ơn đã đọc hướng dẫn này
Nếu bạn muốn tìm hiểu thêm về JavaScript, bạn có thể muốn xem trang web của tôi tại sebhastian.com, nơi tôi đã xuất bản hơn 100 hướng dẫn về lập trình với JavaScript, tất cả đều sử dụng các ví dụ mã và giải thích dễ hiểu.
Các hướng dẫn bao gồm thao tác Chuỗi, thao tác Ngày, phương thức Mảng và Đối tượng, giải pháp thuật toán JavaScript, v.v.
