jQuery-複数の$（document）.ready…？

質問：

2つのJavaScriptファイルをリンクし、両方とも$(document).ready関数を使用するとどうなりますか？一方が他方を上書きしますか？または両方$(document).readyとも呼ばれますか？

例えば、

<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!");
});

両方の呼び出しを1つにまとめることがベストプラクティスであると確信して$(document).readyいますが、私の状況では不可能です。

すべてが実行され、最初に呼び出されたときに最初に実行されます!!

<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>

デモあなたは、彼らがお互いを置き換えるものではありません見ることができるように

また、私が言及したいことの1つ

これの代わりに

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

あなたはこのショートカットを使うことができます

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

各jQuery()呼び出しは実際に戻る必要があることに注意してください。例外が1つスローされた場合、後続の（無関係の）呼び出しは実行されません。

これは構文に関係なく適用されます。あなたは使用することができjQuery()、jQuery(function() {})、$(document).ready()、あなたが好きな、動作は同じです。初期のブロックが失敗した場合、後続のブロックは実行されません。

これは、サードパーティのライブラリを使用しているときの問題でした。1つのライブラリが例外をスローし、後続のライブラリは何も初期化しませんでした。

$（document）.ready（）; 他の関数と同じです。ドキュメントが準備されると、つまりロードされたときに発生します。問題は、複数の$（document）.ready（）内で同じ関数を起動したときではなく、複数の$（document）.ready（）が起動したときに何が起こるかについてです。

//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>');

});

どちらもまったく同じように動作します。唯一の違いは、前者でも同じ結果が得られることです。後者は、ほんの一瞬で実行され、少ないタイピングを必要とします。:)

結論として、可能な限り1 $（document）.ready（）;のみを使用します。

//古い答え

どちらも順番に呼び出されます。これらを組み合わせることがベストプラクティスです。それが不可能な場合でも心配しないでください。ページは爆発しません。

実行はトップダウンです。早い者勝ち。

実行順序が重要な場合は、それらを組み合わせます。

両方とも呼ばれ、先着順です。見てくださいここに。

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

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

出力：

ドキュメント対応2が呼び出されました！

スレッドを壊滅させるのではなくjQuery、提案された構文の最新バージョンでは次のとおりです。

$( handler )

匿名関数を使用すると、これは次のようになります

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

このリンクを参照してください：

https://api.jquery.com/ready/