"Bất đồng bộ" là một thuật ngữ thường được sử dụng trong lĩnh vực công nghệ thông tin để chỉ các quá trình, tác vụ, hoặc hệ thống không hoạt động đồng bộ với nhau. Điều này có thể ám chỉ đến các quá trình chạy không cùng một tốc độ, không hoàn thành vào cùng một thời điểm, hoặc không tuân theo một lịch trình chung. Show JavaScript có phải là bất đồng bộ?Người ta thường nói JavaScript là ngôn ngữ bất đồng bộ, nhưng thực tế không hẳn như vậy. JS luôn đồng bộ & blocking Làm sao để sử lý bất đồng bộ trong JavaScript ?Có 3 cách "thường dùng" để xử lý bất bồng bộ: Cách 1: Sử dụng Callback Cách 2: Sử dụng Promie Callback trong JavaScriptCallback là gì ?Trước khi tiếp tục với công việc khác, bạn có thể sử dụng callback functions (hàm gọi lại) trong lập trình để chạy các tác vụ khi một tác vụ khác hoàn thành. Khi một tác vụ bất đồng bộ hoàn thành, nó sẽ gọi một hàm gọi lại để thông báo và tiếp tục xử lý dữ liệu. Đồng bộ và bất đồng bộ trong javascript cung cấp nhiều kiến thức với các cách xử lý bất đồng bộ như callback, promise, async/await. Nó giúp bạn nhiều trong việc xử lý lập trình trình tương tác sau này. Bởi vì các chức năng bạn triển khai nhiều khi đòi hỏi cần tận dụng tối đa tài nguyên hệ thống, hoặc phải gọi đến các chức năng từ module khác, từ hệ thống khác… Để hiểu bài này, các kiến thức yêu cầu cần có là lập trình đối tượng trong javascript và các kiến thức cơ sở về lập trình javasript nhé. Trong quá trình triển khai Javascript, đồng bộ và bất đồng bộ luôn là những trường hợp hoàn toàn có thể xảy ra. Nhất là khi nhiều luồng cùng truy cập vào một dữ liệu, điều đó có thể gây nên các lỗi nghiêm trọng hoặc kết quả không theo ý muốn. Vì vậy, việc xử lý đồng bộ và bất đồng bộ trong Javascript là một kỹ năng quan trọng. Hãy cùng theo dõi hướng dẫn từ chuyên gia của CO-WELL Asia về cách xử lý trong Javascript nhé! 1. Tìm hiểu sample đơn giản trong JavascriptChẳng hạn, chúng ta cùng có 2 hàm xử lý chờ sau 3 giây thì xử lý log. Cụ thể như sau:  Như bình thường thì các dòng code sẽ được chạy theo tuần tự từ đầu đến cuối nên khi log sẽ như sau: Tuy nhiên, thực tế lại xảy ra như sau: Như vậy, chúng ta có thể thấy thấy nó không chạy theo thứ tự. Mà khi asyncAfter3second được gọi thì không đợi ở đó 3 giây mà sẽ bỏ qua để xử lý tiếp. Kết quả của hàm asyncAfter3second được gọi sau cùng. Cách xử lý như vậy chính là việc xử lý bất đồng bộ. Cơ chế của xử lý bất đồng bộ là các hàm không được thực thi ngay mà được đưa vào thread riêng để chạy và kết quả được trả về Queue. Có 1 thread Event loop luôn check Queue khi có kết quả trả về sẽ gọi hàm callback tương ứng để xử lý tiếp cho hàm bất đồng bộ. Những hàm bất đồng bộ là các hàm gọi thông qua Web API. Các hàm này sẽ được gọi thông qua một thread mà không đợi kết quả trả về. Thay vào đó sẽ thực hiện tiếp các xử lý bên dưới. Như ở ví dụ trên thì đầu tiên chúng ta gọi hàm syncAfter3second. Hàm này có 1 vòng loop nên sẽ lặp đợi ở đây và chạy tiếp. Sau đó gọi tiếp hàm asyncAfter3second bất đồng bộ. Do hàm này là hàm bất đồng bộ nên sẽ được đẩy vào 1 thread riêng để chạy và sau đó skip ở đây rồi tiếp tục các xử lý bên dưới. Tiếp tục gọi hàm asyncAfter3second, vì là hàm bất đồng bộ nên cũng được đẩy vào thread riêng để chạy và nó tiếp tục chạy hàm tiếp theo trong main thread. Hàm syncAfter3second được chạy tiếp, tại đây có 1 vòng loop để đợi 3s sau khi chạy xong thì hàm này kết thúc. Lúc này Event loop là 1 thread riêng và luôn check trong Queue. Khi có 1 kết quả của Web API trả về, Event loop sẽ gọi hàm callback tương ứng để trả kết quả. Ở ví dụ trên thì sau khi 2 hàm bất động bộ trả về kết quả trong Queue nó sẽ gọi đến hàm callback tương ứng thực hiện console.log(‘asyncAfter3second’). 2. Khi nào thì cần xử lý bất đồng bộ và xử lý đồng bộChúng ta cần xử lý đồng bộ khi mà xử lý trước là rằng buộc (input) cho xử lý sau. Khi đó chúng ta bắt buộc phải xử lý theo đúng trình tự (đồng bộ). Xử lý đồng bộ có một điểm là sẽ làm cho tốc độ xử lý chậm đi vì nó buộc phải xử lý tuần tự. Ngược lại, khi các xử lý không rằng buộc thì chúng ta nên dùng xử lý bất đồng bộ. Điều này sẽ làm cho web chạy nhanh hơn. vì đồng thời nhiễu được xử lý cùng 1 lúc. Cơ bản nhất các bạn có thể hiểu khi load file js hay css nếu để load đồng bộ thì có lẽ sẽ phải đợi khá lâu trang web của bạn mới load xong. Nhưng nếu load bất đồng bộ thì kết quả sẽ rất khả quan. Ngoài ra, khái niệm lazy load hay tìm hiểu về Callback / Promise hay Async / Await sẽ giúp bạn hiểu rõ về bất động bộ. Lấy ví dụ 1 màn hình của bạn cần gọi 3 API, trong đó: – API1 load mất 2 giây – API2 load mất 5 giây – API3 load mất 6 giây Nếu như các bạn để load đồng bộ thì sẽ phải mất 2 + 5 + 6 = 13 giây xong các bạn mới xử lý để hiện thị màn hình. Nhưng nếu bạn để load bất đồng bộ thi các bạn chỉ mất khoảng 6 giây là đã load xong tài nguyên. Chúng ta có thể thấy rõ lợi thế khi sử dụng bất đồng bộ. Ở ví dụ trên các bạn cần chú ý cả 3 api trên sẽ được load bất động bộ nhưng để màn hình hiện thị được các bạn cần phải đợi cả 3 API kết thúc thì bạn mới bắt đầu phần xử lý hiện thị cho màn hình. Lúc này các bạn cần tìm hiểu thêm về Promise. Lời khuyên dành cho bạn là nếu cái gì xử lý được bất đồng bộ thì nên xử lý bất đồng bộ. Việc quản lý (event, tài nguyên) của bạn phức tạp hơn nhưng đổi lại xử lý của bạn sẽ nhanh hơn tương đối nhiều. MIÊNG TQ – CO-WELL Asia Trên đây là những hướng dẫn từ cơ bản tới chi tiết của chuyên gia từ CO-WELL Asia về đồng bộ và bất đồng bộ trên Javascript. Đừng quên theo dõi chuyên mục CODEWELL trên website CO-WELL Asia để đón đọc những bài viết về Javascript nói riêng và công nghệ bổ ích nói chung nhé! |
