データテーブルに進行状況バーを作成するにはどうすればよいですか?

Question

現在、大量のデータ (5000) を含むデータ テーブルを作成しています。データを漸進的なペースでロードできるようにするために、時間単位ごとにどれだけのデータがロードされたかを示す進行状況バーを追加しました。しかし、以下のコードはもう機能しません。

let handleProgressBar = (id, value, total) => {
    let パーセント = Math.round((値 / 合計) * 10000) / 100;
    $(id " > div").html(パーセント "%");
    $(id " > div").css('width', パーセント "%");
}

let table = $('#data').DataTable();

fetch('https://jsonplaceholder.typicode.com/photos')
.then((res) => res.json())
.then((res) => {
  res.forEach(async(data,index)=>{
    table.row.add([
      データ.id、
      データ.アルバムID、
      データ.タイトル、
      データ.url
    ]);
    handleProgressBar('#progress-bar', インデックス 1, res.length);
    await 新しい Promise(r => setTimeout(r, 1)); // 1ミリ秒スリープします
  });
  table.draw();
});

.progress-bar-striped {
    オーバーフロー: 非表示;
    高さ: 20ピクセル;
    マージン-ボトム: 20px;
    背景色: #f5f5f5;
    境界半径: 4px;
    -webkit-box-shadow: インセット 0 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: インセット 0 1px 2px rgba(0, 0, 0, 0.1);
    ボックスシャドウ: インセット 0 1px 2px rgba(0, 0, 0, 0.1);
}

.progress-bar-striped>div {
    背景画像：線形グラデーション（45度、rgba（255、255、255、0.15）25％、透明25％、透明50％、rgba（255、255、255、0.15）50％、rgba（255、255、 255、0.15) 75%、透明 75%、透明);
    背景サイズ: 40px 40px;
    フロート: 左;
    幅: 0%;
    高さ: 100%;
    フォントサイズ: 12px;
    行の高さ: 20px;
    色: #000000;
    フォントの太さ: 太字;
    テキスト整列: 中央;
    -webkit-box-shadow: インセット 0 -1px 0 rgba(0, 0, 0, 0.15);
    -moz-box-shadow: インセット 0 -1px 0 rgba(0, 0, 0, 0.15);
    ボックスシャドウ: インセット 0 -1px 0 rgba(0, 0, 0, 0.15);
    /*-webkit-transition: 幅 3 秒の容易さ;
    -moz-transition: 幅 3 秒の緩和。
    -o-transition: 幅 3 秒の緩和。
    トランジション: 幅 3 秒の緩和;*/
    アニメーション: プログレスバーストライプ 2 秒線形無限。
    背景色: #288ade;
}

.progress-bar-striped p {
    マージン: 0;
}

@keyframes プログレスバーストライプ {
    0% {
        背景位置: 40px 0;
    }
    100% {
        背景位置: 0 0;
    }
}

<link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="スタイルシート"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>

<div id="プログレスバー" クラス="プログレスバーストライプ">
    <div style="幅: 0%;">
        <p>0%</p>
    </div>
</div>

<table id="data" class="テーブル表示テーブルの剥がし">
    <頭>
        <tr>
            ID
            アルバム ID
            タイトル
            <th>URL 写真</th>
        </tr>
    </頭>
    <tbody></tbody>
</table>

テーブルは正常にロードされましたが、進行状況バーには 0% から 100%100% と表示されます。コード＞。以下のコードに示すように、データテーブルを使用しない場合に機能するかどうか (ただし完全ではありません) と考えていました。

let handleProgressBar = (id, value, total) => {
    let パーセント = Math.round((値 / 合計) * 10000) / 100;
    $(id " > div").html(パーセント "%");
    $(id " > div").css('width', パーセント "%");
}

(async() =>{
  n = 5000 とします。
  handleProgressBar('#progress-bar', 0, n);
  for(let i = 1; i <= n; i ) {
    handleProgressBar('#progress-bar', i, n);
    await 新しい Promise(r => setTimeout(r, 1)); // 1ミリ秒スリープします
  }
})();
<pre class="brush:css;toolbar:false;">.progress-bar-striped {
    オーバーフロー: 非表示;
    高さ: 20ピクセル;
    マージン-ボトム: 20px;
    背景色: #f5f5f5;
    境界半径: 4px;
    -webkit-box-shadow: インセット 0 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: インセット 0 1px 2px rgba(0, 0, 0, 0.1);
    ボックスシャドウ: インセット 0 1px 2px rgba(0, 0, 0, 0.1);
}

.progress-bar-striped>div {
    背景画像：線形グラデーション（45度、rgba（255、255、255、0.15）25％、透明25％、透明50％、rgba（255、255、255、0.15）50％、rgba（255、255、 255、0.15) 75%、透明 75%、透明);
    背景サイズ: 40px 40px;
    フロート: 左;
    幅: 0%;
    高さ: 100%;
    フォントサイズ: 12px;
    行の高さ: 20px;
    色: #000000;
    フォントの太さ: 太字;
    テキスト整列: 中央;
    -webkit-box-shadow: インセット 0 -1px 0 rgba(0, 0, 0, 0.15);
    -moz-box-shadow: インセット 0 -1px 0 rgba(0, 0, 0, 0.15);
    ボックスシャドウ: インセット 0 -1px 0 rgba(0, 0, 0, 0.15);
    /*-webkit-transition: 幅 3 秒の容易さ;
    -moz-transition: 幅 3 秒の緩和。
    -o-transition: 幅 3 秒の緩和。
    トランジション: 幅 3 秒の緩和;*/
    アニメーション: プログレスバーストライプ 2 秒線形無限。
    背景色: #288ade;
}

.progress-bar-striped p {
    マージン: 0;
}

@keyframes プログレスバーストライプ {
    0% {
        背景位置: 40px 0;
    }
    100% {
        背景位置: 0 0;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> ;</スクリプト>
<div id="プログレスバー" クラス="プログレスバーストライプ">
    <div style="幅: 0%;">
        <p>0%</p>
    </div>
</div>

私たちはここに問題があるとは知りません。大量のデータを処理するための完全な方法を提供できるようにするために、事前に承認しました。

Answer 1

解決策を見つけました。間違いは、res.forEach の中に async という単語を入れたことです。これを fetch.then の後に配置し、forEach の代わりに for ループを使用すると、関数の実行の動作が変わり、正常に完了します。 loadNumber 変数を使用すると、単位時間あたりにデータ テーブルにプロットされるデータの量を決定できます。

リーリー リーリー リーリー