Tóm Tắt
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ì vậy khi bạn sử 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().
Bạn đang xem: $(document).ready(function() là gì
Giả sử bạn có hàm A nằm trong file a.js và trong file b.js có sử 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.
Xem thêm: Khi Đó Trong Khi Đó Tiếng Anh Là Gì? Trong Khi Đó
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 sử dụng onload cho một thẻ HTML nào đó thì nó sẽ có tác dụng với thẻ HTML đó thôi nhưng nếu bạn dùng cho window thì nó sẽ có tác 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ì vậy 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 đó hoạt động 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
Tuy nhiên nếu bạn cần thao tác JavaScript với các hình ảnh thì sử dụng window.onload() là hợp lý. Vậy nên tùy mục đích sử dụng các bạn có thể áp dụng kiến thức này vào việc lập trình với JavaScript.
