37243


**ループでDOM要素を追加しているのですが、処理終了判定はどう実装するのでしょうか？**  
・Promise？

・下記のような感じで、appendChildしている箇所が複数あるのですが、これは非同期処理に該当するのでしょうか？  
・Ajaxとか特に使用していないように思うのですが…

[code]

    for (var i = wrap_col.length; i < active_col; i++){
            var new_col = wrap_col[0].cloneNode(true);
            new_col.innerHTML = '';
            this_wrap.appendChild(new_col);
    }
    
[/code]


CC BY-SA 3.0
2017-08-14T10:37:04.697
37188
2017-08-16T06:11:24.483
2017-08-16T06:03:03.040
8000
7886
question
javascript
ループでDOM要素を追加し終えたら、そのタイミングで次の処理をしたい


> ループでDOM要素を追加しているのですが、処理終了判定はどう実装するのでしょうか？

そのまま、`for` ループを抜ければ終了したことになります。

> 下記のような感じで、appendChildしている箇所が複数あるのですが、これは非同期処理に該当するのでしょうか？

`appendChild` は同期処理です。

追加したノードが画面に描画されるタイミングは、非同期であったり特定のAPIで同期されたり、色々です。


CC BY-SA 3.0
2017-08-15T17:43:18.047
37226
2017-08-15T17:43:18.047
3475
37188
answer


# 同期処理

int32_t さんの回答通り、`appendChild` は同期処理なので、forループを抜けた後に後続処理を書けば、同期的に連続処理されます。

[code]

    for (var i = wrap_col.length; i < active_col; i++){
      var new_col = wrap_col[0].cloneNode(true);
      new_col.innerHTML = '';
      this_wrap.appendChild(new_col);
    }
    console.log('次の処理');
    
[/code]

なお、同期処理されるのはDOMツリーにノードを追加するところまでなので、CSSの適用、外部リソース(画像ファイル等)のダウンロード等は非同期処理で行われます。

# コードの改善点

余談ですが、コード上にいくつか改善点があるので指摘しておきます。

  * `cloneNode(true)` した後に `innerHTML` で子ノード群を削除していますが、それならば初めから `cloneNode(false)` で子ノードを複製しなければ良いでしょう。
  * DocumentFragment を使えば、appendChild は一回で済みます。
  * `new_col` は毎回同じノードを cloneNode していますが、雛形となるノードを変数にキャッシュする事で効率化できます

コードは次のようになります。

[code]

    var var new_col = wrap_col[0].cloneNode(false), df = new_col.ownerDocument.createDocumentFragment();
    for (var i = wrap_col.length; i < active_col; i++){
      df.appendChild(new_col.cloneNode(false));
    }
    this_wrap.appendChild(df);
    console.log('次の処理');
    
[/code]

Re: re9 さん


CC BY-SA 3.0
2017-08-16T05:53:16.490
37243
2017-08-16T06:11:24.483
2017-08-16T06:11:24.483
20262
20262
37188
answer