[JavaScript][jQuery]非同期処理の処理順を担保する
JavaScriptにおいて、非同期処理の処理順を担保したい場合。
例えば以下の処理では、タイトル文字列を取得することができない。
(HTMLの内容を取得する非同期処理完了前に、$('title').text() がコールされる)
<script type="text/javascript"> $(function(){ loadPage(); getTitle(); }); function loadPage() { $('body').load( ''http://www6.plala.or.jp/private-hp/samuraidamasii/'' ); } function getTitle() { console.log($('title').text()); //←タイトル表示できない setTimeout(function() { console.log($('title').text()); //←(内容取得後であれば)タイトル表示できる }, 3000); } </script>
非同期処理においても、完了後に次の処理を開始するよう Deferred を使用する。
<script type="text/javascript"> $(function(){ //loadPage(); //getTitle(); loadPage().done(getTitle); }); function loadPage() { //$('body').load( // ''http://www6.plala.or.jp/private-hp/samuraidamasii/'' //); var d = $.Deferred(); $('body').load( 'http://www6.plala.or.jp/private-hp/samuraidamasii/', null, d.resolve //コールバック関数 ); return d.promise(); } function getTitle() { console.log($('title').text()); } </script>
$('body').load() 時に
XMLHttpRequest cannot load 〜〜〜
のエラーが発生する場合は、こちらの記事を参照。
[JavaScript][Chrome]ローカルホストから他ドメインにアクセスできない時の対処法 - サブノート