jQuery - nhiều $ (tài liệu). yet?

Câu hỏi:

Nếu tôi liên kết trong hai tệp JavaScript, cả hai đều có $(document).readychức năng, điều gì xảy ra? Có cái nào ghi đè lên cái kia không? Hay cả hai $(document).readyđược gọi?

Ví dụ,

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script type="text/javascript" src="http://.../jquery1.js"></script>

<script type="text/javascript" src="http://.../jquery2.js"></script>

jquery1.js:

$(document).ready(function(){
    $("#page-title").html("Document-ready was called!");
});

jquery2.js:

$(document).ready(function(){
    $("#page-subtitle").html("Document-ready was called!");
});

Tôi chắc chắn rằng cách tốt nhất là kết hợp cả hai cuộc gọi thành một $(document).readynhưng không hoàn toàn có thể xảy ra trong tình huống của tôi.

Tất cả sẽ được thực hiện và Trên cơ sở chạy đầu tiên được gọi đầu tiên !!

<div id="target"></div>

<script>
  $(document).ready(function(){
    jQuery('#target').append('target edit 1<br>');
  });
  $(document).ready(function(){
    jQuery('#target').append('target edit 2<br>');
  });
  $(document).ready(function(){
    jQuery('#target').append('target edit 3<br>');
  });
</script>

Demo Như bạn có thể thấy họ không thay thế nhau

Ngoài ra một điều tôi muốn đề cập đến

thay thế

$(document).ready(function(){});

bạn có thể sử dụng phím tắt này

jQuery(function(){
   //dom ready codes
});

Điều quan trọng cần lưu ý là mỗi jQuery()cuộc gọi phải thực sự trở lại. Nếu một ngoại lệ được ném vào một, các cuộc gọi tiếp theo (không liên quan) sẽ không bao giờ được thực hiện.

Điều này áp dụng bất kể cú pháp. Bạn có thể sử dụng jQuery(), jQuery(function() {}), $(document).ready(), bất cứ điều gì bạn thích, hành vi này là giống nhau. Nếu một sớm không thành công, các khối tiếp theo sẽ không bao giờ được chạy.

Đây là một vấn đề đối với tôi khi sử dụng thư viện của bên thứ 3. Một thư viện đã đưa ra một ngoại lệ, và các thư viện tiếp theo không bao giờ khởi tạo bất cứ điều gì.

$ (tài liệu). yet (); là giống như bất kỳ chức năng khác. nó kích hoạt khi tài liệu đã sẵn sàng - tức là đã tải. câu hỏi là về những gì xảy ra khi nhiều $ (tài liệu). yet () bị bắn không phải khi bạn kích hoạt cùng một chức năng trong nhiều $ (tài liệu). yet ()

//this
<div id="target"></div>

$(document).ready(function(){
   jQuery('#target').append('target edit 1<br>');
});
$(document).ready(function(){
   jQuery('#target').append('target edit 2<br>');
});
$(document).ready(function(){
   jQuery('#target').append('target edit 3<br>');
});

//is the same as
<div id="target"></div>

$(document).ready(function(){

    jQuery('#target').append('target edit 1<br>');

    jQuery('#target').append('target edit 2<br>');

    jQuery('#target').append('target edit 3<br>');

});

cả hai sẽ cư xử giống hệt nhau. sự khác biệt duy nhất là mặc dù trước đây sẽ đạt được kết quả tương tự. cái sau sẽ chạy một phần của giây nhanh hơn và yêu cầu gõ ít hơn. :)

trong kết luận, nơi nào có thể chỉ sử dụng 1 $ (tài liệu). yet ();

// câu trả lời cũ

Cả hai sẽ được gọi theo thứ tự. Thực hành tốt nhất sẽ là kết hợp chúng. nhưng đừng lo lắng nếu nó không thể Trang sẽ không nổ.

Thi công là từ trên xuống. Đầu tiên đến, phục vụ đầu tiên.

Nếu trình tự thực hiện là quan trọng, kết hợp chúng.

Cả hai sẽ được gọi, đầu tiên đến trước được phục vụ. Hãy nhìn vào đây .

$(document).ready(function(){
    $("#page-title").html("Document-ready was called!");
  });

$(document).ready(function(){
    $("#page-title").html("Document-ready 2 was called!");
  });

Đầu ra:

Tài liệu đã sẵn sàng 2 đã được gọi!

Không phải để tạo một luồng, nhưng theo phiên bản mới nhất của jQuerycú pháp được đề xuất là:

$( handler )

Sử dụng một chức năng ẩn danh, nó sẽ trông giống như

$(function() { ... insert code here ... });

Xem liên kết này:

https://api.jquery.com/ yet /