Nội dung bài viết
Video học lập trình mỗi ngày
Link toàn bộ Series bài viết:
[Series Callback Javascript] Phần 1: Giới Thiệu Callbacks.
[Series Callback Javascript] - Phần 2: Promise Là Gì? Khi Nào Sử Dụng Promise ?
Series Callback Javascript: Phần 3 : Async/Await Là Gì? Khác Gì Với Promise Trong Javascript?
Trong series này tôi sẽ cung cấp cho các bạn hiểu về:
- Giới thiệu về CallBacks
- Promise
- Promise API
- Async/Await
Và bài đầu tiên sẽ là : Giới thiệu về CallBacks trong javascript
Hẳn tất cả trong các Lập Trình Viên thì "Callback" không còn xa lạ gì với họ trong tất cả các ngôn ngữ chứ không riêng gì về javascript.
Ở đây tôi chỉ đề cập tới Javascript một ngôn ngữ mà ai cũng từng đặt chân tới.
Trong javascript thì chắc chắn các action tất nhiên là không đồng bộ (asynchronous). Điều đó ai cũng thấu và hiểu. Để mình cho một ví dụ cho các bạn hiểu rõ hơn vì sao tôi nói là không đồng bộ.
Giờ đi vào một ví dụ xuyên suốt luôn:
Tập trung nhìn kỹ ví dụ nhé.
function addLinkScript(src) {
let script = document.createElement('script');
script.src = src;
document.head.append(script);
}Đây là một action dùng để add một file javascript vào page khi page thực thi. Và khi được add xong file script này thì chúng ta hay user mới có thể sử dụng được các chức năng của file đó.
Khi page load xong thì file sẽ được add có dạng : <script src="file javascript được add...">
Cách gọi nó thật đơn giản, chỉ cần gọi;
addLinkScript('https://anonystick.com/myjs/fileScript.js'); // cú pháp
Tiếp ví dụ trên;
dòng code 1: addLinkScript('https://anonystick.com/myjs/fileScript.js');
dòng code 2: // code tiếp
dòng code 3: // code tiếp
Vậy đặt câu hỏi Đoạn mã trên có chạy đồng bộ không, xin thưa là không?
Trong khi function addLinkScript được thực thi, nhưng trong quá trình thực thi hay add bọ vấn đề chậm hay bị gì đó thì các dòng code 2 và 3 vãn tiếp tục chạy cho dù code 1 vẫn chưa xong. Cho nên có thể không thể sử dụng những funcion bên trong file sj đó.
bây giờ các bạn cũng đã hiểu hơn một chút rồi phải không? Để tôi giải thích kỹ hơn một chút(cho các bạn mới bắt đầu học js). Còn các bạn chuyên sâu thì bỏ qua dòng này nhé. ^^
Ví dụ bên trong file https://anonystick.com/myjs/fileScript.js có "someFunction()".
Thì khi bạn thực thi :
addLinkScript('https://anonystick.com/myjs/fileScript.js');
// sau đó gọi ngay để sủe dụng
someFunction()
Tôi e rằng điều đó không thể được. Vì someFunction() được chạy ngay luôn sau khi đoạn mã trên được thực thi. Nghĩa là nó không đồng bộ. Các bạn nhớ nha "Không đồng bộ".
Vậy bây giờ làm sao cho someFunction được làm việc. Đó chính là callbacks mà như tiêu đề bài viết này.
Giờ tôi sẽ giúp các bạn chạy callback như thế nào?
Tiếp ví dụ trên, ta viết lại:
function addLinkScript(src, callback) {
let script = document.createElement('script');
script.src = src;
script.onload = () => callback(script);
document.head.append(script);
}
Sau đó gọi :
addLinkScript('/my/script.js', function() {
// callback này được gọi sau khi file được load thành công
someFunction(); // Bây giờ nó đã hoạt động...
})
Đó chính là callback, và cách hoạt động như thế nào? Ngoài ta callback trong callback trong multiple callbacks.
Có thể bị nhập ma luôn vì số lượng callback.
Trên bài viết này tôi đã giới thiệu về cho các bạn hiểu vè callbacks. Thật sự nó không phức tạp như các bạn nghĩ, nhưng không hiểu thì nó rất phức tạp áhhas ^^.
Sau này js đã cung cấp nhiều các để đơn giản hoá callback này.
Mời các bạn đón đọc về bài: [Series Callback javascript] - Phần 2: Sử dụng Promise để giải quyết callback trong javascript.
Link toàn bộ Series bài viết:
[Series Callback Javascript] Phần 1: Giới Thiệu Callbacks.
[Series Callback Javascript] - Phần 2: Promise Là Gì? Khi Nào Sử Dụng Promise ?
Series Callback Javascript: Phần 3 : Async/Await Là Gì? Khác Gì Với Promise Trong Javascript?
