Giới thiệu

Cũng như các ngôn ngữ lập trình khác, JavaScript sẽ chạy biên dịch từ trên xuống dưới và từ trái qua phải. chính vì thế khi bạn dùng một hàm mà phía trên nó không tồn tại hàm đó thì sẽ bị bái lỗi undefined ngay. Và để giải quyết vấn đề này thì ta sẽ dùng sự kiện onload trong JavaScript.

Bạn đang xem: $(document).ready(function() là gì

Trong bài viết này, chúng ta sẽ cùng nhau so sánh window.onload và $(document).ready().

Giả sử bạn có hàm A nằm trong file a.js và trong file b.js có dùng hàm A thì bắt buộc file a.js phải đặt trên file b.js, nó tuan theo nguyên tắc load theo thứ tự.

Ví dụ: đoạn code này sai vì hàm do_validate() mặc dù đã định nghĩa nhưng nó lại nằm dưới đoạn code gọi tới nó

Trường hợp này sai vì hàm do_validate chưa được định nghĩa

//Đặt file A trước file Bvar flag = do_validate(); // hàm này nằm trong file Afunction do_validate() // hàm này nằm trong file B// return TRUE/FALSE;
//Đặt file B trước file Afunction do_validate() // hàm này năm trong file B// return TRUE/FALSE;var flag = do_validate(); hàm này năm trong file A
Một lưu ý quan trọng nữa khi các bạn gán một hàm nào đó cho một sự kiện nào đó trong HTML thì cũng phải tuân theo quy luật trên, nghĩa là nếu bạn gán một hàm mà phía trên thẻ HTML đó không có thì nó sẽ thông báo lỗi là undefined.

và để ta khả năng viết như trường hợp 1 thì sẽ dùng window.onload và $(document).ready() để giải quyết vấn đề đó Javascript cung cấp 1 ready callback (hàm gọi lại) là khi nào document được render ra hết thì những script bạn viết trong nó mới được thực thi cho dù bạn đặt ở đâu đi chăng nữa. jQuery cũng vậy vì nó là thư viện kiểu mới của javascript vậy khác nhau giữa chúng là gì? Mình sẽ cho biết dưới đây.

Xem thêm: No Way Nghĩa Là Gì ? Noway Trong Tiếng Tiếng Việt

Window.onload()

Sự kiện này có ý nghĩa rằng khi trình duyệt đã load xong mọi thứ (image, js, css) thì những đoạn code nằm bên trong đó mới được chạy. Có một lưu ý rằng nếu bạn dùng onload cho một thẻ HTML nào đó thì nó sẽ có công dụng với thẻ HTML đó thôi nhưng nếu bạn dùng cho window thì nó sẽ có công dụng cho toàn trang.

Hay nói cách khác những đoạn code nằm bên trong sự kiện onload sẽ được chạy sau cùng khi mà trình JS đã được biên dịch 1 lần. chính vì thế nếu trong sự kiện onload bạn gọi tới một hàm nào đó thì dù bạn đặt hàm đó phía trên hay phía dưới thì đều đúng

$(document).ready()

Cũng giống với sự kiện Window.onload() nếu bạn muốn một sự kiện jQuery nào đó vận hành bạn phải gọi nó bên trong hàm $(document).ready(). Nhưng mọi thứ bên trong hàm này sẽ được load ngay khi DOM Tree được load và trước khi toàn bộ nội dung của trang được load.

Tham khảo: Khoá học Online nền tảng lập trình cho người mới bắt đầu bằng ngôn ngữ JavaScript

Kết Luận

$(document).ready() có ưu điểm rõ nét hơn onload khi thời điểm kích hoạt sự kiện là sớm hơn, đặc biệt khi trang web có dung lượng lớn, chứa nhiều hình ảnh.

mặc khác nếu bạn cần thao tác JavaScript với các hình ảnh thì dùng window.onload() là hợp lý. Vậy nên tùy mục đích dùng các bạn khả năng áp dụng kiến thức này vào việc lập trình với JavaScript.