Khi nào bạn không nên sử dụng $ (tài liệu) .ready (function() cho trình xử lý sự kiện?

Question

Tôi mới sử dụng jquery và javascript và chỉ muốn biết, tại sao bạn không muốn sử dụng hàm .ready() cho tất cả sự kiện của mình xử lý?

không thể có được vấn đề tiềm ẩn nếu người dùng gửi đầu vào cho một sự kiện chuột hoặc một sự kiện bàn phím trước khi toàn bộ trang đã được trả lại?

Answer 1

Điều này không bao giờ xảy ra, tài liệu jQuery đã sẵn sàng kích hoạt khi DOM đã được tải. Nó không chờ đợi cho trang đầy đủ (bao gồm hình ảnh và muốn) để tải. Nó sẽ là cực kỳ hiếm hoi mà một người dùng sẽ có thể phản ứng trong thời gian để thử và kích hoạt một cái gì đó trước khi mã của bạn đang được thực hiện. Đọc: http://api.jquery.com/ready/

Cụ thể, đoạn đầu tiên:

Trong khi JavaScript cung cấp các sự kiện tải cho thực thi mã khi một trang được trả lại, sự kiện này không được kích hoạt cho đến khi toàn bộ tài sản như hình ảnh có đã hoàn toàn nhận được. Trong hầu hết các trường hợp, tập lệnh có thể chạy ngay sau khi phân cấp DOM đã được hoàn thành được xây dựng. Trình xử lý được chuyển tới .ready() được đảm bảo là được thực hiện sau khi DOM sẵn sàng, vì vậy đây thường là nơi tốt nhất để đính kèm tất cả các trình xử lý sự kiện khác và chạy mã jQuery khác.

Vì vậy, việc sử dụng $ (tài liệu) .ready (function() {}) hoặc $ (function() {}) tương đương luôn là phương pháp hay.

EDIT: Để tiếp tục đảm bảo rằng người dùng sẽ không bao giờ gặp sự cố, hãy đảm bảo tập lệnh của bạn được lưu trữ cùng với trang web của bạn. Ví dụ, jQuery có tùy chọn sử dụng CDN. CDN là tốt đẹp, nhưng nếu vì lý do gì mà người dùng có thể truy cập vào trang web của bạn chứ không phải CDN, nó có thể khiến trang của bạn ở trạng thái vô ích.

Answer 2

tôi tin rằng bạn thực sự nên sử dụng các handler $(document).ready(). lý do là, nếu HTML hoặc DOM của bạn chưa được tải đầy đủ, khi bạn liên kết các sự kiện với các yếu tố khác nhau, chúng có thể không thành công do chưa xuất hiện trên trang.

Tôi không chắc chắn ai hoặc những gì đã nói với bạn không để đưa xử lý sự kiện trong chức năng sẵn sàng, nhưng tôi muốn nói đó là một thực tế khá phổ biến.

Answer 3

đó là lý do tại sao thực tiễn tốt nhất là quấn toàn bộ mã bên trong hàm .ready().

$(document).ready(function(){ 
    //all event handlers here 
}); 

Không thể có được vấn đề tiềm ẩn nếu người dùng gửi đầu vào cho một sự kiện chuột hoặc một sự kiện bàn phím trước khi toàn bộ trang đã được trả lại?

Vấn đề không phải trước khi toàn bộ trang được hiển thị hay không. Vấn đề là khi jQuery chưa được nạp, và sau đó một người dùng cố gắng bấm vào một cái gì đó được xử lý thông qua trình xử lý sự kiện jQuery. Để trả lời câu hỏi của bạn; có, có thể có một vấn đề tiềm ẩn ở đó.

Answer 4

Có những trường hợp bạn không muốn hoặc không thể đính kèm trình xử lý sự kiện khi sẵn sàng vì bạn chỉ muốn bật sự kiện sau một số sự kiện khác hoặc vì nội dung và thông tin khác đang được tải qua ajax. Đối với hầu hết các phần chức năng sẵn sàng là nơi chính xác.

Answer 5

Không thể có vấn đề tiềm năng nếu người dùng gửi đầu vào cho sự kiện chuột hoặc sự kiện bàn phím trước khi toàn bộ trang được hiển thị? [đoạn này] là đề cập đến một kịch bản không sử dụng .ready()

Nói chung, nếu bạn muốn tham khảo một yếu tố từ Javascript yếu tố trong câu hỏi phải đã được phân tích cú pháp, tức là, thêm vào Cây DOM. Điều này áp dụng cho dù bạn đang cố gắng đính kèm một trình xử lý sự kiện (có hoặc không có jQuery), thay đổi các thiết lập CSS của nó, hoặc bất cứ điều gì.

Việc xử lý .ready() không đợi cho toàn bộ trang được render, nó chờ đợi cho trang để là "sẵn sàng" cho các thao tác JS theo nghĩa là nó đã được phân tích cú pháp và cây toàn bộ DOM có được xây dựng. Tại thời điểm đó, việc hiển thị vẫn có thể xảy ra, ví dụ: nội dung thực tế của các phần tử hình ảnh vẫn có thể được tải xuống một phần.

Tuy nhiên, người ta có thể tiến hành thao tác các yếu tố từ JavaScript trước (hoặc không có) các .ready() miễn là bạn làm như vậy trong một khối kịch bản được bao gồm sau các yếu tố (s) trong câu hỏi trong trang nguồn, bởi vì trình duyệt thực hiện phân tích cú pháp từ đầu đến cuối từ nguồn html của bạn. Một ví dụ:

<input type="text" id="input1"> 
<script> 
    // following will work, because "input1" already exists 
    $("#input1").change(function() { /* do something */ }); 

    // following will NOT work, because "input2" has not been parsed yet 
    $("#input2").change(function() { /* do something */ }); 
</script> 
<input type="text" id="input2"> 

Vì vậy, nếu vì một lý do bạn có một số thành phần quan trọng của chức năng mà bạn cảm thấy bạn hoàn toàn phải thiết lập trước.ready() bạn có thể làm một cái gì đó giống như ở trên.

Lưu ý rằng bạn không cần chức năng .ready() nếu bạn bao gồm tập lệnh ở cuối phần thân, vì (như với .ready()) tại thời điểm đó tất cả các phần tử sẽ được phân tích cú pháp.

Nơi bạn làm cần .ready() là dành cho mã trong tệp JS bên ngoài nếu bạn không chắc chắn vị trí tệp sẽ được bao gồm trong trang. Nếu nó được bao gồm trong phần <head>, nó sẽ được thực thi trước khi phần còn lại của tài liệu được phân tích cú pháp, do đó bạn cần sử dụng .ready().