So sánh window.onload và $(document).ready()

Trong bài viết này, chúng ta sẽ cùng nhau so sánh window.onload và $(document).ready() để thấy sự khác biệt giữa chúng nhé!

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.

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

Giả sử hàm do_validate() nằm trong 1 file khác:

//Đặt file A trước file B

var flag = do_validate(); // hàm này nằm trong file A

function do_validate() // hàm này nằm trong file B
{
    // return TRUE/FALSE;
}
Code language: PHP (php)

Nhưng nếu sửa lại như thế này thì sẽ đúng

//Đặt file B trước file A

function 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
Code language: PHP (php)

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 có thể 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.

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.

Kết Luận

$(document).ready() có ưu điểm rõ rệ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.

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.

Chúc bạn thành công!!!

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

---

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.