jQuery.Deferredを使って、非同期処理がしっかり終わってから別の処理を与える！

JavaScript

こういうことがやりたかった…

jQuery.Deferredが問題を解決してくれたので、ご紹介します。

やりたかったことは、以下の3点でした。

1. WordPressでの新着記事一覧を、一旦JSON形式で吐き出して、

（次の参考サイトで紹介されているような下処理をします。）
http://rakuishi.com/archives/6713

取得したい各記事の日付・URL・タイトルを、date・link・titleとします。

2. それを全く別の静的ページで、
新着記事のお知らせとして表示したい。

【HTML・before】

<div id="newsWrap"></div>

【JS】

$.getJSON("/blog/api/", function(json){ //←情報を取得する先
 $(json).each(function(){
    var code = '<dt>' + this.date + '</dt>' + '<dd><a href="' + this.link + '">' + this.title + '</a></dd>';
    $('#news').append(code); //←出力先を指定
    });
});

上記の記述で、うまく取得できれば
次のように出力されるかと思います。

【HTML・after】

<div id="newsWrap">
 <dl id="news">
      <dt>日付A</dt>
        <dd>
          <a href="'リンクA">タイトルA</a>
        </dd>
     <dt>日付B</dt>
        <dd>
          <a href="'リンクB">タイトルB</a>
        </dd>
     <dt>日付C</dt>
        <dd>
          <a href="'リンクC">タイトルC</a>
        </dd>
 </dl>
</div>

3. かつ非同期処理が終わったら、別の処理を与える。

の非同期処理にかかる時間には、ばらつきが発生するかと思います。
読み込みがきちんと完了してから、別の処理を与える為に、
（以下例では、スクロールバーをオリジナルデザインにしたかったので
jScrollPaneという、jQueryプラグインを使用しています。）
.setTimeout()ではなく、.Deferred()を採用しました。

以下のように追記することで、
思い通りの処理ができ、正常に表示されました。

【JS】

var newsFunc = function(){
    var def = $.Deferred();
 $.getJSON("/blog/api/", function(json){
       $(json).each(function(){
            var code = '<dt>' + this.date + '</dt>' + '<dd><a href="' + this.link + '">' + this.title + '</a></dd>';
            $('#news').append(code);
      });
     def.resolve(json);
  });
 return def.promise();
};

// 上記読み込み後の処理が書けます
newsFunc().done(function(){
    $('#newsWrap').jScrollPane();
});

※ 読み込みエラー時の対処は含んでおりません。

今回は、WordPressの記事を取得するという例とさせて頂きましたが、
外部APIの情報を読み込むケースにも使えるかと思います。
参考になればこれ幸いでございます。

その他、参考外部サイト
 https://app.codegrid.net/entry/deferred-1
http://qiita.com/yuku_t/items/3d1cf51d7ae91305eaaa