Hướng Dẫn Xử Lý Bất Đồng Bộ Trong JavaScript: Phần 1

Lại một năm mới đến, chúc cho anh chị em trên Viblo có sức khỏe dồi dào, tiền vào như nước, tiền ra ào ào! Đừng quên dành chút thời gian để đọc bài viết này, hy vọng nó sẽ giúp ích cho công việc của các bạn hoặc chí ít là giúp các bạn giết thời gian sau những giờ lập trình căng thẳng.

Lập Trình Bất Đồng Bộ Trong JavaScript

Lập trình bất đồng bộ (asynchronous programming) là một trong những vấn đề cơ bản trong JavaScript nhưng không phải ai cũng hiểu rõ. Nhiều người chỉ làm theo thói quen và để lại những lỗi nghiêm trọng ảnh hưởng đến hiệu suất của chương trình. Khi dữ liệu trở nên lớn hơn, những lỗi này có thể làm cho ứng dụng chạy chậm, giật lag hoặc xuất hiện các bug khó chịu.

Vì vậy, mình viết bài viết này nhằm chia sẻ những hiểu biết và kinh nghiệm của mình trong việc xử lý bất đồng bộ. Mục tiêu là giúp các bạn tránh những lỗi phổ biến trong lập trình.

Lý Thuyết Về Bất Đồng Bộ

Trong phát triển ứng dụng, chúng ta thường thực thi các hàm tuần tự từ trên xuống như sau:

func1();
func2();
func3();

Điều này được gọi là xử lý đồng bộ (synchronous). Mặc dù cách này đơn giản và dễ đọc, nhưng đôi khi nó có thể làm chương trình chạy chậm lại.

Chúng ta có thể viết mã để các hàm chạy song song (parallel), không cần phải thực hiện theo thứ tự. Điều này được gọi là xử lý bất đồng bộ (asynchronous). Trong JavaScript, chúng ta có thể gặp rất nhiều hàm hoạt động theo cách đồng bộ và bất đồng bộ. Chẳng hạn, các hàm như toUpperCase(), substr() là đồng bộ, trong khi setTimeout() và fetch() lại là bất đồng bộ.

Hãy chú ý rằng trong Node.js, chúng ta có cả fs.writeFile() (bất đồng bộ) và fs.writeFileSync() (đồng bộ). Hàm bất đồng bộ được khuyến khích vì nó không làm chương trình bị block, giúp cải thiện hiệu suất.

Ví Dụ Thực Tế

Dưới đây là một số hàm sẽ được sử dụng trong các ví dụ:

• setTimeout: Là một hàm built-in để trì hoãn việc thực thi một hàm trong một khoảng thời gian nhất định.
• delay: Hàm tự chế để giả lập thời gian thực thi của một hàm, chạy theo kiểu đồng bộ:

function delay(x) {
  const start = new Date().getTime();
  while (new Date().getTime() - start < x * 1000) {}
}

• console.time(): Sử dụng để đo thời gian thực thi chương trình.

Mô Tả Quy Trình Luộc Rau

Hãy viết một chương trình mô tả quy trình luộc rau. Với mỗi bước ở đây, mình sẽ giả lập thời gian delay:

function soCheRau() {
  delay(3);
  console.log('Sơ chế rau.');
}

function dunSoiNuoc() {
  delay(4);
  console.log('Đun sôi nước.');
}

function luocRau() {
  delay(5);
  console.log('Luộc rau.');
}

function votRau() {
  delay(3);
  console.log('Vớt rau, để nguội.');
}

Tiến hành thực thi:

console.time('Total time');
soCheRau();
dunSoiNuoc();
luocRau();
votRau();
console.timeEnd('Total time');

Tổng thời gian là 15 giây (3 + 4 + 5 + 3).

Giải Pháp Bất Đồng Bộ

Để tối ưu thời gian, bạn có thể sử dụng cách gọi bất đồng bộ với các hàm callback:

function soCheRau(callback) {
  setTimeout(() => {
    console.log('Sơ chế rau.');
    if (callback) callback();
  }, 3000);
}
// Các hàm khác tương tự...

Khi gọi các hàm này:

console.time('run');
soCheRau();
dunSoiNuoc();
luocRau();
votRau();
console.timeEnd('run');

Kết quả sẽ không còn theo thứ tự mong muốn, và rất có thể bạn sẽ vớt rau trước khi nước sôi. Vì vậy, phần tiếp theo, hãy đảm bảo rằng bạn chờ đến khi nước sôi trước khi luộc rau.

Trước tiên, hãy gọi song song soCheRau() và dunSoiNuoc(), sau đó mới thực hiện luocRau() và votRau():

let count = 0;
function checkCallback() {
  count++;
  if (count === 2) {
    luocRau(() => {
      votRau(() => {
        console.timeEnd('run');
      });
    });
  }
}
soCheRau(checkCallback);
dunSoiNuoc(checkCallback);

Kết quả là các hàm sẽ thực hiện đúng theo thứ tự mong muốn. Việc này không chỉ rút ngắn thời gian mà còn nâng cao hiệu suất khi bạn viết mã cho các ứng dụng lớn.

Tổng Kết

Việc sử dụng lập trình bất đồng bộ giúp cải thiện hiệu suất của ứng dụng, tuy nhiên cũng cần cẩn thận để tránh tình trạng callback hell. Để giải quyết vấn đề này, chúng ta sẽ tiếp tục khám phá về Promise, async/await và cách bắt lỗi trong phần tiếp theo.

Hãy tự thực hành và tìm hiểu thêm về lập trình bất đồng bộ trong JavaScript nhé! Chúc các bạn thành công!

Nguồn: https://huydq.dev.
source: viblo