$(function(){})について

Question

質問

$(function(){
})の中の処理の順番が分かりません。。。。

例えば、チェックボックスでアラートを出すとき、
チェックボックスに対して、changeとclickが指定できますよね。。。

<input type="checkbox" id="check"　value="チェック">
<span>チェックボックス</span>

↓こう書くと、アラートの順番は、、、

$(function(){
  $('#check').change(function(){
    $(function(){
      alert('change')
    })
  });

  $("#check").on("click", function(){
     alert('click')
   });
})

結果：アラート「クリック」→「チェンジ」

になるのですが、

↓こう書くと、

$(function(){
  $('#check').change(function(){
      　alert('change')
  });

  $("#check").on("click", function(){
     alert('click')
   });
})

アラートの順番はこうなりました。。

結果：アラート「チェンジ」→「クリック」

どういう・・・

$(function(){　処理　})の中にさらに
$(function(){　処理　})がある場合、

一旦javascriptとしての処理はスキップされて、
全DOMが読み込まれてから最後に実行されるのでしょうか・・・？

補足情報（FW/ツールのバージョンなど）

対象ブラウザはIE11です。。。。

備考

基本中の基本、みたいな気がするのですが、
どなたか丁寧に教えていただけるとありがたいです。。。。
よろしくお願いします。；；；

Comments

[azuapricot]

$(function(){ ... } の使い方が間違っている気がします。
そこ普通の関数じゃだめなんですか？
大抵、$(function(){ ... }　はjs内に一つあれば事足りるはずです

https://www.ipentec.com/document/javascript-jquery-doller-function-mean

[xx_6_6_xx]

ご指摘ありがとうございます；；
実は、実際の開発のほうでは$(function(){....})を1つにして解決しました。。
ですが、以前のプログラムでこのような書き方をしていたにも関わらず、
想定通りの動きをしていたので、
なぜかと思い質問させて頂きました；；

[azuapricot]

それは　【たまたま】そのように動いていただけかもしれません。
複数回思考したり、データ数が増えたりすると、非同期通信によって処理にずれが発生し、想定外の動作が起こる可能性があります。
普通の関数で問題ないのであれば、このような記述はしないことをオススメします。
（もちろん、意図してこうしているのであれば止めはしませんが。。。)

[azuapricot]

良ければなぜ $(function(){....}) を二重にしていたのか後学のため教えて頂けますか？

[xx_6_6_xx]

やはり、普通は2重にすることなんてないですよね；；

あ。。2重にしていた理由は、
maisumakunさんへの回答にもお返事させて頂いたのですが、
完全にただの勉強不足で、なんとなくまとまった処理の頭に $(function(){...})を
つけるようにしていた。。というだけです；；

（入力チェックなどの、何度も使用する処理を"関数化"したかったので、
$(function Chk(){ 入力チェック ...}) みたいになんとなく書いていました。。
当然、関数化はできていなかったので、意味はなかった上に、$(function(){...})を2重にして、ややこしいことになるという結果になってしまったのですが。。。）

[azuapricot]

関数化したい、というのであれば、恐らく関数化があやふやだっただけ、ということでしょうか・・・？
回答に関数化について記載しておきます

[xx_6_6_xx]

その通りです；；
「関数化したいけど、どう書けばいいのかわからないな･･･とりあえずfunctionつけて名前つけておけばいいか...またあとで調べて直しておこう」みたいな発想でした。。。

すみません；；わざわざありがとうございます；；；
とてもありがたいです；；おねがいします。

[azuapricot]

jQuery とか javaScriptって最初は似たような記述ばっかりだしよくわかんないですよねー...(気持ちはよくわかります)
でも関数化したいという試みは凄く良いと思うので今回で関数の使い方がマスター出来ればもう完璧ですね◎

[xx_6_6_xx]

優しいご意見をありがとうございます；；
何度も同じ処理を書いていると、jQueryの部分が長くなってしまって、、
どうにかならないかなと思っての試みでした。。
ありがとうございます！マスターできるよう、引き続きがんばります。。。！！

Answer 1

jQueryのソースを読んでみると$(function(){ 処理 })は、
呼び出し時点でDOMのロードが完了していなければ、DOMロード完了時にその処理を実行するようイベントハンドラを設定し、
呼び出し時点でロードが完了していれば、setTimeoutによって、0秒後に処理を実行するようタイマーを設定していました。

ただしsetTimeoutで0ミリ秒後を指定しても、その処理は即座には実行されません。
処理が実際に実行されるのは現在処理中の関数などが終了した後で、ブラウザ側が自動的にsetTimeoutで指定された処理を呼び出したときになります。

$(function(){　処理　}) の中にさらに $(function(){　処理　}) がある場合、
最初の処理はDOMロード完了時にその処理を実行され、
２つ目の処理はsetTimeoutによって0秒後に処理が予約されますが、実際にその処理がされるのは現在実行中の動きが終わった後、という挙動になると思います。

Comments

[xx_6_6_xx]

ご回答ありがとうございます！
とても理解できました。。。！
なぜ偶然にでも思っていた動きになっていたのか、納得です。。。

Answer 2

$(function(){　処理　})の中にさらに

$(function(){　処理　})がある場合、

$(function(){　処理　})の中身は非同期に実行されますので、タイミングが遅れます。

…そもそも論ですが、そのような書き方を必要とされる場面がまずないかとは思います。

Comments

[xx_6_6_xx]

回答ありがとうございます！
タイミングが遅れる･･･となると、
そのタイミングって決まっているのでしょうか？
（javascriptが全て読み込まれた後、など。。。）

[maisumakun]

えっと、$(function(){})を2重に重ねて何をしたいのでしょうか。

[xx_6_6_xx]

実は、、理由を書くと長くなるのですが、；；

元々、
$(function(){...})の意味を分からずに使っていて、
入力チェックなどの「1かたまりの、度々使用する処理」に対して、
全て頭に $(function(){...})をつけていました。

なので、特に意識せず2重に重ねて書いてしまっていたのです。。

今実際の開発では、
$(function(){...})は1つに修正したので、$(function(){...})を2重に重ねてはいません。；；

ですが、その修正前（2重に重ねていた時）も動いてはいたので、
2重になっている$(function(){...})は、どのタイミングで動いていたのか、と
気になったので質問させて頂きました。。。

本来なら、質問すべきことではないのかもしれませんが、
調べても理解できなかったので、ここで質問させていた頂いた、、、という状況です。。。。

Answer 3

二重にするとそういう挙動をするんだとお勉強させていただきました。

恐らく、関数化のやり方について理解が不十分？とお見受けしました。
以下に関数化のサンプルを記載しますので暇なときにでも目を通してもらえればと思います。

$(function(){
  $('#check').change(function(){
      　test1();
  });
})


function test1(){
   //処理
}

処理をまとめたかった、とのことなので恐らくこの書き方で問題ないかと思います。

参考サイト

Comments

[xx_6_6_xx]

回答ありがとうございます！
なるほど。。！こうすると関数化されて、何度も使う処理を簡単に書けるようになるんですね･･･！
シンプルな例でとても理解しやすいです；；！

[azuapricot]

onで関数名を渡してあげて関数を実行させたり色々使い方があるので
余裕が出てきたら色々調べてみると面白いですよ◎

Answer 4

（追記）
自分の勘違いによる回答です。無視してください。詳しくはコメントを参照してください。
ただ、一度書いてしまった回答なので、一応下記にそのまま残しておきます。

質問の回答自体はすでに出ているので、ただの補足なのですが。

ドキュメントには、

While this function is, technically, chainable, there really isn't much use for chaining against it.
（Google翻訳）この関数は、技術的には連鎖可能ですが、実際にはそれに対する連鎖にはあまり使用されません。

と書かれています。
普通 $(function(){ ... }) を入れ子にするようなことはしません。

Comments

[maisumakun]

chainableというのは、ネストではなく、$(function(){}).hoge()のようなメソッドチェーンのことかと思います。

[2KOH]

ありがとうございます。
翻訳の方しか見てなくて、「連鎖」をメソッドチェーンではなくネストの方の意味で訳されたものだと勝手に勘違いしていました。
失礼しました。

[xx_6_6_xx]

ご回答ありがとうございます！
やはり、2重にするようなことしませんよね；；勉強になります；；；

Answer 5

<script>
$(function(){
  $("#check").on("change click", function(e){
     console.log(e.type)
   });
})
</script>
<label><input type="checkbox" id="check">チェックボックス</label>

順番としてはclickが先で、あとからchangeイベントが発火します

Comments

[xx_6_6_xx]

回答ありがとうございます！
onに複数設定できるんですね･･･！知りませんでした；；