Bagaimana untuk membuat bar kemajuan dalam jadual data?

Question

Saya sedang mengusahakan jadual data yang mengandungi sejumlah besar data (5000). Untuk dapat memuatkan data yang sedang berjalan, saya menambah bar kemajuan yang menggambarkan jumlah data yang telah dimuatkan setiap unit masa. Tetapi kod di bawah tidak lagi berfungsi.

biarkan handleProgressBar = (id, nilai, jumlah) => {
    biarkan peratus = Math.round((nilai / jumlah) * 10000) / 100;
    $(id + " > div").html(peratus + "%");
    $(id + " > div").css('lebar', peratus + "%");
}

biarkan jadual = $('#data').DataTable();

ambil ('https://jsonplaceholder.typicode.com/photos')
.then((res) => res.json())
.then((res) => {
  res.forEach(async(data, indeks)=>{
    table.row.add([
      data.id,
      data.albumId,
      data.title,
      data.url
    ]);
    handleProgressBar('#progress-bar', indeks+1, res.length);
    tunggu Janji baharu(r => setTimeout(r, 1)); // tidur 1 ms
  });
  table.draw();
});

.progress-bar-striped {
    limpahan: tersembunyi;
    ketinggian: 20px;
    jidar bawah: 20px;
    warna latar belakang: #f5f5f5;
    jejari sempadan: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    bayang-kotak: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.progress-bar-striped>div {
    imej latar belakang: kecerunan linear(45deg, rgba(255, 255, 255, 0.15) 25%, lutsinar 25%, lutsinar 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, telus 75%, telus);
    saiz latar belakang: 40px 40px;
    terapung: kiri;
    lebar: 0%;
    ketinggian: 100%;
    saiz fon: 12px;
    ketinggian garis: 20px;
    warna: #000000;
    font-weight: tebal;
    text-align: tengah;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    bayang-kotak: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    /*-webkit-transition: lebar 3s mudah;
    -moz-transition: lebar 3s mudah;
    -o-peralihan: lebar 3s mudah;
    peralihan: lebar 3s mudah;*/
    animasi: progress-bar-stripes 2s linear infinite;
    warna latar belakang: #288ade;
}

.progress-bar-belang p {
    margin: 0;
}

@keyframes progress-bar-stripes {
    0% {
        kedudukan latar belakang: 40px 0;
    }
    100% {
        kedudukan latar belakang: 0 0;
    }
}</pra>
<pre class="brush:html;toolbar:false;"><link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel=" lembaran gaya"/>
<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="progress-bar" class="progress-bar-striped">
    <div style="width: 0%;">
        <p>0%</p>
    </div>
</div>

<table id="data" class="table display table-stripped">
    <kepala>
        <tr>
            <th>ID</th>
            <th>ID Album</th>
            <th>Tajuk</th>
            <th>Foto URL</th>
        </tr>
    </kepala>
    <tbody></tbody>
</table>

Jadual berjaya dimuatkan, tetapi bar kemajuan menunjukkan 100% kod>. Saya tertanya-tanya sama ada ia akan berfungsi (tetapi tidak sempurna) jika saya tidak menggunakan jadual data, seperti yang ditunjukkan dalam kod di bawah.

biarkan handleProgressBar = (id, nilai, jumlah) => {
    biarkan peratus = Math.round((nilai / jumlah) * 10000) / 100;
    $(id + " > div").html(peratus + "%");
    $(id + " > div").css('lebar', peratus + "%");
}

(async() =>{
  biarkan n = 5000;
  handleProgressBar('#progress-bar', 0, n);
  untuk(biar i = 1; i <= n; i++) {
    handleProgressBar('#progress-bar', i, n);
    tunggu Janji baharu(r => setTimeout(r, 1)); // tidur 1 ms
  }
})();</pra>
<pre class="brush:css;toolbar:false;">.progress-bar-striped {
    limpahan: tersembunyi;
    ketinggian: 20px;
    jidar bawah: 20px;
    warna latar belakang: #f5f5f5;
    jejari sempadan: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    bayang-kotak: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.progress-bar-striped>div {
    imej latar belakang: kecerunan linear(45deg, rgba(255, 255, 255, 0.15) 25%, lutsinar 25%, lutsinar 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, telus 75%, telus);
    saiz latar belakang: 40px 40px;
    terapung: kiri;
    lebar: 0%;
    ketinggian: 100%;
    saiz fon: 12px;
    ketinggian garis: 20px;
    warna: #000000;
    font-weight: tebal;
    text-align: tengah;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    bayang-kotak: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    /*-webkit-transition: lebar 3s mudah;
    -moz-transition: lebar 3s mudah;
    -o-peralihan: lebar 3s mudah;
    peralihan: lebar 3s mudah;*/
    animasi: progress-bar-stripes 2s linear infinite;
    warna latar belakang: #288ade;
}

.progress-bar-belang p {
    margin: 0;
}

@keyframes progress-bar-stripes {
    0% {
        kedudukan latar belakang: 40px 0;
    }
    100% {
        kedudukan latar belakang: 0 0;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> ;</skrip>
<div id="progress-bar" class="progress-bar-striped">
    <div style="width: 0%;">
        <p>0%</p>
    </div>
</div>

我不知道错误出在哪里。谁能为我提供处理大量数据的数据表进度松的家。

Answer 1

Saya dah jumpa penyelesaiannya. Kesilapannya ialah saya menyediakan pembolehubah async 一词放在 res.forEach 中。当我将其放在 fetch.then 之后并使用 for 循环而不是 forEach 时，函数执行的行为发生了变化并且可以成功完成。 loadNumber untuk menentukan jumlah data yang akan diplotkan dalam jadual data bagi setiap unit masa.

let handleProgressBar = (id, value, total) => {
    let percent = Math.round((value / total) * 10000) / 100;
    $(id + " > div").html(percent + "%");
    $(id + " > div").css('width', percent + "%");
}

let table = $('#data').DataTable({
  dom: 'ilpftr'
});

fetch('https://jsonplaceholder.typicode.com/photos')
.then((res) => res.json())
.then(async(res) => {
  let loadNumber = 50;
  for(let i = 0; i < res.length; i++) {
    table.row.add([
      res[i].id,
      res[i].albumId,
      res[i].title,
      res[i].url
    ]);
    if (i % loadNumber == 0) {
      table.draw();
      handleProgressBar('#progress-bar', i+1, res.length);
      await new Promise(r => setTimeout(r, 1)); // sleep 1 ms
    }
  }
  table.draw();
  handleProgressBar('#progress-bar', res.length, res.length);
});

.progress-bar-striped {
    overflow: hidden;
    height: 20px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.progress-bar-striped>div {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: 40px 40px;
    float: left;
    width: 0%;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: #000000;
    font-weight: bold;
    text-align: center;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    /*-webkit-transition: width 3s ease;
    -moz-transition: width 3s ease;
    -o-transition: width 3s ease;
    transition: width 3s ease;*/
    animation: progress-bar-stripes 2s linear infinite;
    background-color: #288ade;
}

.progress-bar-striped p {
    margin: 0;
}

@keyframes progress-bar-stripes {
    0% {
        background-position: 40px 0;
    }
    100% {
        background-position: 0 0;
    }
}

<link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet"/>
<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="progress-bar" class="progress-bar-striped">
    <div style="width: 0%;">
        <p>0%</p>
    </div>
</div>

<table id="data" class="table display table-stripped">
    <thead>
        <tr>
            <th>ID</th>
            <th>Album ID</th>
            <th>Title</th>
            <th>URL Photo</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>