素人がプログラミングを勉強していたブログ

プログラミング、セキュリティ、英語、Webなどのブログ since 2008

連絡先: すかいぷ:javascripter_  か javascripter あっと tsukkun.net skypeのほうがいいです

setTimeout難しい

setTimeout(
		function(){
		alert('hoge1');
		setTimeout(
			function(){
			alert('hoge2');
			setTimeout(
				function(){
				alert('hoge3');
				},0);
			},0);
		},0);
alert('hoge0');
setTimeout(
		function(){
		alert('hoge4');
		},0);

なんとなくhoge0,hoge1,hoge2,hoge3の順に実行されると思ってたんだけど、
実際にはhoge0,hoge4,hoge1,hoge2,hoge3,hoge4の順に実行される。

  1. hoge1を表示するタイマーがセットされる。
  2. alert('hoge0')が実行される。アラートが表示されている間にもタイマーが進んでいる。
  3. hoge4を表示するタイマーがセットされる。
  4. 0秒経ったので、先にセットされたhoge1を表示するタイマーが実行され、次にhoge2を表示するタイマーがセットされる。
  5. 0秒経ったし先にセットされたhoge1のタイマーが実行されたので、hoge4を表示するタイマーが実行される。
  6. hoge4のタイマーが実行され、なおかつ0秒経ったのでhoge2を表示するタイマーが実行され、hoge3を表示するタイマーがセットされる。
  7. 0秒経ったのでhoge3を表示するタイマーが実行される。

同じ時間にセットされたタイマーは、先にセットされたものが先に作動するのかな。
なので、

setTimeout(
		function(){
		alert('hoge1');
		setTimeout(
			function(){
			alert('hoge2');
			setTimeout(
				function(){
				alert('hoge3');
				},0);
			},0);
		},1000);
alert('hoge0');
setTimeout(
		function(){
		alert('hoge4');
		},0);

とした場合は、hoge0のアラートのOKを押すのが表示されてから1秒以内だと、次に表示されるのがhoge1になるけど、
OKを押すのが1秒より遅かったらhoge4のほうが先に表示される。

難しいな、setTimeout。