setTimeoutで0msを指定する意味

人のコードを見ていて、setTimeoutで0msを指定しているのをたまに見かけます。
このように指定している意味がよく分かっていなかったのですが、少し前に対応した不具合でこの使い所が分かった気がするのでメモしておきます。

サンプルコード

JavaScript

console.log('1番目');
console.log('2番目');

デモページ
この場合、コンソールは上から順番に「1番目」「2番目」と表示されます。
　

JavaScript

setTimeout(function() {
	console.log('1番目');
}, 0);
console.log('2番目');

デモページ2
この場合、コンソールは「2番目」「1番目」の順に表示されます。
これは、setTimeoutで0msを指定することで、現在実行しているイベントハンドラが完了した後
(ドキュメントの状態更新が完了した後)に指定した関数が呼び出されるためです。
　

今回遭遇したバグ

今回遭遇したバグは、select変更後にアラートを出すと、ブラウザがフリーズするものでした。
(iOS7で発生していたのですが、現在は解消されているようです。)

$(function() {
	$('select').change(function() {
		alert('test');
	});
});

select変更によるドキュメントの状態更新が完了する前に、アラートを出していることが原因のようでした。
そのため、setTimeoutを指定してイベント完了後にアラートを出すことで回避できました。

JavaScript

$(function() {
	$('select').change(function() {
		setTimeout(function() {
			alert('test');
		}, 0);
	});
});

【参考サイト】

• 第2引数に 0 を指定している setTimeout() の役割 – わからん
• 【Tips】iPad で select.onchange 中に alert や confirm でフリーズする問題を回避：mx-Lab：So-netブログ