Trước khi vào khám phá những yếu tố nâng cao như Promise, Class thì tất cả chúng ta sẽ tìm hiểu và khám phá thế nào la Asynchronous và Synchronous. Đây là hai khái niệm mà đa phần những lập trình viên mới vào nghề chưa hiểu được thực chất của nó nên dẫn tới giải quyết và xử lý trường hợp bị sai .
Trong bài có sử dụng từ viết tắt :
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.
- Sync => Synchronous
- Async => Asynchronous
Đầu tiên tất cả chúng ta sẽ tìm hiểu và khám phá khái niệm về Asynchronous và Synchronous đã nhé .
1. Synchronous là gì?
Synchronous có nghĩa là xử lý đồng bộ, chương trình sẽ chạy theo từng bước và chỉ khi nào bước 1 thực hiện xong thì mới nhảy sang bước 2, khi nào chương trình này chạy xong mới nhảy qua chương trình khác. Đây là nguyên tắc cơ bản trong lập trình mà bạn đã được học đó là khi biên dịch các đoạn mã thì trình biên dịch sẽ biên dịch theo thứ tự từ trên xuống dưới, từ trái qua phải và chỉ khi nào biên dịch xong dòng thứ nhât mới nhảy sang dòng thứ hai, điều này sẽ sinh ra một trạng thái ta hay gọi là trạng thái chờ. Ví dụ trong quy trình sản xuất dây chuyền công nghiệp được coi là một hệ thống xử lý đồng bộ.
Synchronous hai mặt là mặt xấu và mặt tốt .
Mặt tốt của Synchronous
Chương trình sẽ chạy theo đúng thứ tự và có nguyên tắc nên sẽ không mắc phải những lỗi về tiến trình không thiết yếu. Không chỉ trong lập trình mà trong trong thực tiễn cũng vậy, một công ty đưa ra quá trình đồng nhất sẽ bảo vệ được chất lượng của mẫu sản phẩm, nếu bị lỗi thì sẽ biết ngay là lỗi tại quá trình nào và từ đó sẽ thuận tiện khắc phục .
Mặt xấu của Synchronous
Chương trình chạy theo thứ tự đồng điệu nên sẽ sinh ra trạng thái chờ và là không thiết yếu trong một số ít trường hợp, lúc này bộ nhớ sẽ dễ bị tràn vì phải tàng trữ những trạng thái chờ vô duyên đó .
Khi bạn viết một chương trình quản trị và trong đó có thao tác lưu, mỗi khi lưu bạn nhu yếu người dùng có muốn lưu hay không ? Nếu muốn lưu thì click Yes, ngược lại click No. Trường hợp nay gây tai ương nếu người dùng vô tình chỉ click Lưu mà không chú ý quan tâm đến câu hỏi mà mạng lưới hệ thống đưa ra nên ngồi nhâm nhi cafe, đùng một cái cúp điện thế là cứ tưởng đã lưu rồi 🙂 Vậy quá trình giải quyết và xử lý nên đưa ra công dụng lưu tự động hóa, nghĩa là thao tác lưu sẽ bỏ lỡ bước hỏi đáp kia đi, không nhất thiết phải chờ nó OK mới lưu .
2 .Asynchronous là gì?
trái lại với Synchronous thì Asynchronous là giải quyết và xử lý bất động bộ, nghĩa là chương trình hoàn toàn có thể nhảy đi bỏ lỡ một bước nào đó, thế cho nên Asynchronous được ví như một chương trình hoạt động giải trí không ngặt nghèo và không có tiến trình nên việc quản trị rất khó khăn vất vả. Nếu một hàm A phải bắt buộc chạy trước hàm B thì với Asynchronous sẽ không hề bảo vệ nguyên tắc này luôn đúng .
Mặt tốt của Asynchronous
Có thể giải quyết và xử lý nhiều việc làm một lúc mà không cần phải chờ đón nên tạo cảm xúc tự do 🙂 Ví dụ bạn đi ký một văn bản ở Xã, P. thì nếu bạn có tiền bạn sẽ bỏ lỡ được một vài quy trình phải không nào, lúc đó măt sẽ tươi rói và đương nhiên là anh nhân viên cấp dưới cũng tươi không kém 🙂
Mặt xấu của Asynchronous
Nếu một chuong trình đòi hỏi phải có quy trình thì bạn không thể sử dụng Asynchronous được, điển hình là trong quy trình sản xuât một sản phẩm của các nhà máy công nghiệp không thể áp dụng kỹ thuật làm nhiều công việc một lúc thế này được. Còn về chương trình trong lập trình thì sao? Một thao tác thêm dữ liệu phải thông qua hai công đoạn là validate dữ liệu và thêm dữ liệu, nếu thao tác validate xảy ra sau thao tác thêm thì còn gì tệ hại hơn nữa :).
3. Ajax Asynchronous
Từ trước giờ mình có nhận một số câu hỏi như: Tại sao em gán thay đổi giá trị của biến vào action success mà nó không thấy thay đổi vậy anh? Teamviewer kiểm tra thì thấy bạn đã mắc phải lỗi “chưa hiểu về xử lý bất đồng bộ” :).
Ajax Async
Theo khái niệm của Ajax là gì thì Ajax được viết tắt của các từ Asynchronous JavaScript and XML, rõ ràng từ Asynchronous đã nói lên Ajax là một kỹ thuật xử lý bất đồng bộ. Nhiều bạn lập trình viên khi viết ứng dụng Ajax mà quên mất rằng đây là một chương trình bất đồng bộ, tức là thao tác gửi Ajax và các đoạn code bên dưới sẽ được chạy song song.
// ĐOẠN 1
var message = 'Website freetuts.net thật tuyệt';
// ĐOẠN 2
$.ajax({ url : "some-url", data : {} success : function(result){ message = 'Giá trị đã được thay đổi'; }
});
// ĐOẠN 3
alert(message); // kết quả là Website freetuts.net thật tuyệt ? What the Fuck?
Như vậy trong ĐOẠN 3 đã không nhận được giá trị của ĐOẠN 2, lý do tại sao?
Theo quá trình giải quyết và xử lý thì chương trình hoạt động giải trí từ trên xuông dưới và từ trái qua phải ( điều đương nhiên ), nhưng do Ajax phải mất một khoảng chừng thời hạn rất lớn ( so với vận tốc của trình biên dịch ) để request đến URL nên nếu đưa nó vào giải quyết và xử lý đồng điệu thì quả thật trình duyệt phải mất một khoảng chừng thời hạn chờ, thế cho nên nó sẽ liên tục chạy xuống phía dưới mặc kệ đoạn ajax khi nào xong thì xong => dẫn đến giá trị message không đổi khác .
setTimeout Async
Nhưng nếu bạn tạm ngưng trong vòng 10 giây ví dụ điển hình ( ta coi như 10 giây đủ để request thực thi xong ) thì biến message sẽ nhận được giá trị mới .
// ĐOẠN 1
var message = 'Website freetuts.net thật tuyệt';
// ĐOẠN 2
$.ajax({ url : "some-url", data : {} success : function(result){ message = 'Giá trị đã được thay đổi'; }
});
// ĐOẠN 3
setTimeout(function(){ alert(message);
}, 10000);
//// Giá trị đã được thay đổi
Tại sao lại như vậy? Bản chất setTimeout cũng là một Async đấy các bạn, nghĩa là các đoạn code bên dưới sẽ hoạt động trước nội dung bên trong setTimeout().
Ví dụ:
setTimeout(function(){ alert('1');
}, 0);
alert('2');
Kết quả sẽ Open 2 -> 1 chứ không phải là 1 – 2 như bạn đang nghĩ đâu 🙂
4. Lời kết
Vậy Async và Sync là hai kỹ thuật đã được nhắc đến từ rất lâu nhưng hôm nay mình mới có dịp trình bày về vấn đề này, đây không phải là một kỹ thuật đưa ra trong SS6 nhưng mình cũng xin đưa vào series bởi vì nó có liên quan đến một số phần như Promise.
Các JS Framework lúc bấy giờ như NodeJS, AngularJS đều có sử dụng kỹ thuật Async, Sync và Promise, thế cho nên hãy học kỹ ES6 trước khi mở màn học hai phần kia nhé .
