Concepts
- Synchronous (đồng bộ) là các câu lệnh viết trước thì thực thi trước, viết sau thì thực thi sau. Nói cách khác, sẽ chỉ có một luồng thực thi các đoạn code từ trên xuống dưới.
- Asynchronous (bất đồng bộ) là các câu lệnh được thực hiện không theo thứ tự trong code.
Context
Giả sử ta muốn xây dựng một chương trình đọc dữ liệu từ file và hiển thị ra giao diện:
- Nếu tập tin đang được đọc, ta muốn hiển thị ra chuỗi ”🔃” cho biết đang đọc dữ liệu.
- Sau khi tập tin đã được đọc xong, ta muốn hiển thị chuỗi ”✅” cho biết đã đọc dữ liệu xong.
Synchronous Approach
Hàm readFileSync bên dưới sử dụng vòng lặp while để mô phỏng lại thời gian cần phải chờ khi thực hiện công việc đọc file.
function readFileSync() {
const current = Date.now()
while (Date.now() - current < 3000); // <-- blocking here
console.log(`🔃`)
console.log(`✅`)
}Trong trường hợp kích thước tập tin quá lớn, hàm readFileSync sẽ cần nhiều thời gian để thực thi. Điều này khiến cho các tác vụ đến sau sẽ phải chờ, hay nói cách khác là bị chặn.
Trong ví dụ trên, tác vụ xuất ra chuỗi ”🔃” sẽ cần phải chờ 3 giây thì mới được thực thi.
Asynchronous Approach
Để giải quyết vấn đề trên, trình duyệt cung cấp cho chúng ta nhiều web API giúp chạy các tác vụ song song với nhau (bất đồng bộ).
Hàm setTimeout là một trong những web API điển hình dùng để lập trình bất đồng bộ (xem thêm Setting Time).
function readFileAsync() {
setTimeout(() => {
console.log(`✅`)
}, 3000)
console.log(`🔃`)
}