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

Question

### 質問 $(function(){ })の中の処理の順番が分かりません。。。。例えば、チェックボックスでアラートを出すとき、チェックボックスに対して、changeとclickが指定できますよね。。。 ```html チェックボックス ``` ↓こう書くと、アラートの順番は、、、 ```jQuery $(function(){ $('#check').change(function(){ $(function(){ alert('change') }) }); $("#check").on("click", function(){ alert('click') }); }) ``` ```jQuery 結果：アラート「クリック」→「チェンジ」 ``` になるのですが、 ↓こう書くと、 ```jQuery $(function(){ $('#check').change(function(){ 　alert('change') }); $("#check").on("click", function(){ alert('click') }); }) ``` アラートの順番はこうなりました。。 ```jQuery 結果：アラート「チェンジ」→「クリック」 ``` ### どういう・・・ $(function(){　処理　})の中にさらに $(function(){　処理　})がある場合、一旦javascriptとしての処理はスキップされて、全DOMが読み込まれてから最後に実行されるのでしょうか・・・？ ### 補足情報（FW/ツールのバージョンなど）対象ブラウザはIE11です。。。。 ### 備考基本中の基本、みたいな気がするのですが、どなたか丁寧に教えていただけるとありがたいです。。。。よろしくお願いします。；；；

Accepted Answer

jQueryのソースを読んでみると`$(function(){ 処理 })`は、
呼び出し時点でDOMのロードが完了していなければ、DOMロード完了時にその処理を実行するようイベントハンドラを設定し、
呼び出し時点でロードが完了していれば、`setTimeout`によって、0秒後に処理を実行するようタイマーを設定していました。

ただし`setTimeout`で0ミリ秒後を指定しても、その処理は即座には実行されません。
処理が実際に実行されるのは現在処理中の関数などが終了した後で、ブラウザ側が自動的にsetTimeoutで指定された処理を呼び出したときになります。

`$(function(){　処理　})` の中にさらに `$(function(){　処理　})` がある場合、
最初の処理はDOMロード完了時にその処理を実行され、
２つ目の処理はsetTimeoutによって0秒後に処理が予約されますが、実際にその処理がされるのは現在実行中の動きが終わった後、という挙動になると思います。

Answer

```javascript チェックボックス ``` 順番としてはclickが先で、あとからchangeイベントが発火します

Answer

二重にするとそういう挙動をするんだとお勉強させていただきました。


恐らく、関数化のやり方について理解が不十分？とお見受けしました。
以下に関数化のサンプルを記載しますので暇なときにでも目を通してもらえればと思います。

```jQuery
$(function(){
  $('#check').change(function(){
      　test1();
  });
})


function test1(){
   //処理
}
```

処理をまとめたかった、とのことなので恐らくこの書き方で問題ないかと思います。

[参考サイト](https://www.sejuku.net/blog/31671)

Answer

（追記）
自分の勘違いによる回答です。無視してください。詳しくはコメントを参照してください。
ただ、一度書いてしまった回答なので、一応下記にそのまま残しておきます。

> 質問の回答自体はすでに出ているので、ただの補足なのですが。
> 
> [ドキュメント](https://api.jquery.com/jQuery/#jQuery3)には、
> 
> > While this function is, technically, chainable, there really isn't much use for chaining against it.
> > （Google翻訳）この関数は、技術的には連鎖可能ですが、実際にはそれに対する連鎖にはあまり使用されません。
> 
> と書かれています。
> 普通 `$(function(){ ... })` を入れ子にするようなことはしません。

Answer

> $(function(){　処理　})の中にさらに
$(function(){　処理　})がある場合、

`$(function(){　処理　})`の中身は**非同期**に実行されますので、タイミングが遅れます。

…そもそも論ですが、そのような書き方を必要とされる場面がまずないかとは思います。