So Sánh window.onload và $(document).ready() Trong Javascript

Tổng Quan

Cũng giống như các ngôn ngữ lập trình khác, Javascript biên dịch từ trên xuống dưới. Vì vậy, khi ta gọi 1 hàm mà phía trên nó chưa được khai báo thì sẽ bị lỗi ngay. Để giải quyết vấn đề này thì chúng ta sử dụng sự kiện onload trong javascript.

Ví dụ:

// File A.js
returnName();

// File B.js
function returnName {
 	 return "Quan le";
}

Như cách viết ở trên thì sẽ bị lỗi vì trong file A.js gọi đến hàm returnName() trong file B.js, mà file A.js lại được gọi trước, do đó sẽ bị lỗi ngay.

Nếu sửa lại như vậy thì code sẽ chạy đúng:

// Đặt file B.js trước file A.js
// File B.js
function returnName {
 	 return "Quan le";
}

// File A.js
returnName();

Để giải quyết vấn đề trên, chúng ta dùng sự kiện window.onload và $(document).ready. Khi nào document được render ra hết thì những script các bạn viết trong đó mới được thực thi, dù cho nó được đặt ở đâu đi nữa. Vậy điểm khác nhau giữa 2 sự kiện này là gì?

Điểm Khác Biệt Giữa window.onload và $(document).ready()

1. Window.onload

Sự kiện này có ý nghĩa khi trình duyệt đã load xong mọi thứ: images, js, css,… thì những đoạn code nằm bên trong nó mới được chạy.

2. $(document).ready()

Mọi thứ bên trong hàm này sẽ được load ngay sau khi DOM Tree được load và trước khi toàn bộ nội dung trang web được load.

Tổng Kết

$(document).ready() kích hoạt sự kiện sớm hơn, bởi nó không phải chờ tải các tài nguyên khác như images, videos, contents,… Tùy theo mục đích sử dụng mà các bạn lựa chọn 1 trong 2 hàm này.