JS内で生成・appendした要素からスライドショーを初期化する時に、setTimeoutで処理を遅延させないとうまく初期化できないのはなぜ?

動的に作成した要素をappendした後に、その構造に対してスライドショー(bxSlider)を初期化するという処理を実装しようとしています。

この際、スライドショーを「①」で初期化しようとすると上手く初期化できず、
「②」の様にすると上手く動作します。

静的なHTMLであらかじめ構造を用意してから初期化を叩くと正常に動作する為、
HTMLの構造やbxSlider()プラグイン自体に問題があるようには思えません。

• ①がNGで、②がOKとなる原因は何が考えられるでしょうか?
• setTimeout()を使わずに意図する動作を実現することは可能でしょうか?

JS:

var htmlArray = (function(){
  // $.ajaxでサーバからjsonを取得し、要素を生成して配列に格納
  return myarray;
})();

var i = 0;
var $t = $('#target');

for (i; i < htmlArray.length, i += 1) {

  // 構造を順番にappend
  $t.append(htmlArray[i]);

  // 最後の1回が終わったらスライドショーを初期化したい
  if (i === htmlArray.length - 1) {
    htmlArray[i].ready(function() {

      // === ①これだと上手く動かない ===
      $t.bxSlider();

      // === ②これなら上手く動く ====
      setTimeout(function() {
        $t.bxSlider();
      }, 100);
    }
  }
}

bxSlider初期化直前のDOMのイメージ:

<div id="target">
  <div class="item"><a href="article-url">
    <p>Title String</p>
    <p><img src="img/img.jpg" /></p>
  </a></div>
  <div class="item"><a href="article-url">
    <p>Title String</p>
    <p><img src="img/img.jpg" /></p>
  </a></div>
  <div class="item"><a href="article-url">
    <p>Title String</p>
    <p><img src="img/img.jpg" /></p>
  </a></div>
</div>