Hướng dẫn hàm delay trong javascript

• Lầm tưởng các timer function trong javascript
• Sử dụng phương pháp setTimeout để đặt delay time trong JavaScript
• Sử dụng hàm setTimeout trong một lời hứa
• Kết luận

Đôi khi, tôi muốn đặt delay time trong javascript khi chạy code. Trong bài viết này, mình sẽ cho bạn thấy cách đặt delay time trong JavaScript.

Lầm tưởng các timer function trong javascript

Rất nhiều người lầm tưởng rằng các timer function trong javascript như setTimeout hay setInterval là một phần của ECMAScript hoặc chúng đc implement bởi các javascript engine. Trên thực tế, chúng đc implement bởi browser, và tùy theo từng browser mà chúng đc viết theo cách khác nhau. Trong môi trường NodejS thì chúng đc implement bởi chính Nodejs runtime.

Trong browser, các timer function là một phần của interface Window. Interface này làm cho tất cả các element của nó tồn tại ở dạng global, có thể dùng ở mọi nơi trong scope của javascript. Chính vì thế, bạn có thể chạy hàm setTimeout trực tiếp ngay trong console của browser.

Trong Nodejs, các timer function là một phần của biến global (hoạt động tương tự như interface Window ở browser).

Sử dụng phương pháp setTimeout để đặt delay time trong JavaScript

Bạn có thể sử dụng phương pháp setTimeout để chạy code sau một khoảng delay time.

Ví dụ, mình có thể viết:

setTimeout(() => {
  console.log('hello world')
}, 1000);
Code language: JavaScript (javascript)

Tôi chuyển một lệnh gọi lại để chạy sau độ trễ làm đối số đầu tiên.

Và tôi vượt qua độ trễ để đợi cho đến khi lệnh gọi lại được chạy trong mili giây như đối số thứ hai.

Bây giờ bạn sẽ thấy nhật ký được ghi 'hello world' sau 1 giây.

Sử dụng hàm setTimeout trong một lời hứa

Bạn có thể sử dụng hàm setTimeout trong một lời hứa để có thể dễ dàng sử dụng setTimeout nhiều lần một cách tuần tự.

Để làm điều này, tôi viết:

const sleep = (ms) => {
  return new Promise(resolve => setTimeout(resolve, ms));
}
(async () => {
  console.log("Hello");
  await sleep(2000)
  console.log("world");
})()
Code language: JavaScript (javascript)

Bạn tạo một hàm sleep trả về lời hứa được tạo với hàm Promise.

Tôi chuyển vào một cuộc gọi lại, nhận hàm resolve và gọi hàm setTimeout và hàm resolve để lời hứa được giải quyết.

ms là độ trễ để đợi tính bằng mili giây cho đến khi resolve chạy.

Sau đó, bạn có thể sử dụng nó trong chức năng async bên dưới đó.

Vì vậy, mình nên xem 'Hello' là phần trong đăng nhập đầu tiên.

Sau đó 2 giây, 'world' sẽ được đăng nhập.

Kết luận

Bạn có thể chạy code để delay time trong javascript với phương thức setTimeout.

Để sử dụng đặt delay time trong JavaScript một cách thành thạo hơn nữa, mình có thể gói nó trong một lời hứa.

Cảm ơn bạn đã theo dõi bài viết!

Các bạn có thể tham khảo các bài viết hay về CSS tại đây.

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU

KHOÁ HỌC BOOTCAMP JAVA/JAVASCRIPT/PHP TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG