###要素の追加処理
async / await を利用して ul に 100個の li を追加するサンプルを作成しました。

jQuery
1;(function($){
2  $(document).ready(function(e){
3
4    const appendFunc = (async () => {
5      const insertFunc = () => {
6        return new Promise( resolve => {
7          for(let i=0;i<100;i++){
8            $('ul').append('<li>');
9          }
10          resolve();
11        });
12      };
13      await insertFunc();
14    })();
15    
16    console.log('complete');
17
18  });
19}($));

確認したいこと

上記サンプル実行時において
・complete 表示時にはすべての li の append処理が完了し、イベントの登録や要素へのアクセスが可能な状態であることが保障されているのでしょうか？
・appendの完了タイミングをready()で取得できると聞いたのですが、上記の様に、追加する要素が多い場合などは、どの要素に対してreadyをバインドするべきでしょうか？

詳しい方、お力沿いのほどよろしくお願いいたします。

行動規範の内容に同意します

回答2件

ベストアンサー

complete 表示時にはすべての li の append処理が完了し、イベントの登録や要素へのアクセスが可能な状態であることが保障されているのでしょうか？

appendFuncが非同期でうごいていればconsole.logとasync/awaitの関係にないので
保証はされないのでは？
ただ例示の処理自体非同期ではないので普通に指定順に実行されて
complete時にはliの配置は終わっているように見えます。

sample

これはlengthが0になる

javascript
1<script>
2$(function(){
3  const appendFunc = (async () => {
4    const insertFunc = () => {
5      return new Promise( resolve => {
6        setTimeout(function(){
7        for(let i=0;i<100;i++){
8          $('ul').append('<li>');
9        }
10        resolve();
11        },1000);
12      });
13    };
14    await insertFunc();
15  })();
16  console.log($('ul li').length);
17  console.log('complete');
18});
19</script>
20<ul></ul>

これはlengthが100になる

javascript
1<script>
2$(function(){
3  const appendFunc = (async () => {
4    const insertFunc = () => {
5      return new Promise( resolve => {
6        setTimeout(function(){
7        for(let i=0;i<100;i++){
8          $('ul').append('<li>');
9        }
10        resolve();
11        },1000);
12      });
13    };
14    await insertFunc();
15    console.log($('ul li').length);
16    console.log('complete');
17  })();
18});
19</script>
20<ul></ul>