サブノート

技術的なトピックが中心の備忘録

[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]ローカルホストから他ドメインにアクセスできない時の対処法 - サブノート