

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

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

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

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

JS:

[code]

    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);
        }
      }
    }
    
[/code]

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

[code]

    <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>
    
[/code]


CC BY-SA 3.0
2015-07-27T07:14:56.327
12740
2016-09-04T07:13:19.207
2015-07-27T09:17:44.710
208
9386
question
javascript jquery
JS内で生成・appendした要素からスライドショーを初期化する時に、setTimeoutで処理を遅延させないとうまく初期化できないのはなぜ?


非同期に実行すれば”上手く”動くなら、$t.bxSlider()がhtmlArray.ready()の無名関数を呼ぶ後の処理に依存しているからでしょう。  
ここでも何度も言われていますが、JavaScriptはシングルスレッドなのでsetTimeoutが実行されるのは必ず自分を呼び出したスレッドが終わった後です。（JavaScriptには同期待ちもないので必ずスレッドが終わった後です）  
このプログラムだと、htmlArray[i].ready()が全部終わった後に実行すればうまく動くというなら、それは処理順に齟齬があるのでしょう。


CC BY-SA 3.0
2015-07-29T11:14:07.957
12805
2015-07-29T11:14:07.957
8136
12740
answer


公式ページのsamplesに reload sliderがありましたが、これで実現できるのではないかと思います。

<http://bxslider.com/examples/reload-slider>

違っていたらご容赦ください。

以上です。


CC BY-SA 3.0
2015-11-26T15:17:10.147
19340
2015-11-26T15:17:10.147
5778
12740
answer