Wie erstelle ich einen Fortschrittsbalken in einer Datentabelle?

Question

Ich arbeite derzeit an einer Datentabelle, die eine große Datenmenge (5000) enthält. Um die laufenden Daten laden zu können, habe ich einen Fortschrittsbalken hinzugefügt, der anzeigt, wie viele Daten pro Zeiteinheit geladen wurden. Aber der folgende Code funktioniert nicht mehr.

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

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

fetch('https://jsonplaceholder.typicode.com/photos')
.then((res) => res.json())
.then((res) => {
  res.forEach(async(data, index)=>{
    table.row.add([
      data.id,
      data.albumId,
      data.title,
      data.url
    ]);
    handleProgressBar('#progress-bar', index+1, res.length);
    warte auf neues Versprechen(r => setTimeout(r, 1)); // 1 ms schlafen
  });
  table.draw();
});

.progress-bar-striped {
    Überlauf versteckt;
    Höhe: 20px;
    Rand unten: 20px;
    Hintergrundfarbe: #f5f5f5;
    Randradius: 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 {
    Hintergrundbild: 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);
    Hintergrundgröße: 40px 40px;
    schweben: links;
    Breite: 0 %;
    Höhe: 100 %;
    Schriftgröße: 12px;
    Zeilenhöhe: 20px;
    Farbe: #000000;
    Schriftdicke: fett;
    Textausrichtung: Mitte;
    -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 3sease;
    -moz-transition: Breite 3s Leichtigkeit;
    -o-Übergang: Breite 3s Leichtigkeit;
    Übergang: Breite 3s Leichtigkeit;*/
    Animation: Fortschrittsbalkenstreifen 2s linear unendlich;
    Hintergrundfarbe: #288ade;
}

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

@keyframes progress-bar-stripes {
    0 % {
        Hintergrundposition: 40px 0;
    }
    100% {
        Hintergrundposition: 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>Titel</th>
            <th>URL Foto</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

Die Tabelle wurde erfolgreich geladen, aber der Fortschrittsbalken zeigt 100 % statt von 0 % Code>. Ich habe mich gefragt, ob es funktionieren würde (aber nicht perfekt), wenn ich keine Datentabelle verwenden würde, wie im folgenden Code gezeigt.

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

(async() =>{
  sei n = 5000;
  handleProgressBar('#progress-bar', 0, n);
  for(let i = 1; i <= n; i++) {
    handleProgressBar('#progress-bar', i, n);
    warte auf neues Versprechen(r => setTimeout(r, 1)); // 1 ms schlafen
  }
})();

.progress-bar-striped {
    Überlauf versteckt;
    Höhe: 20px;
    Rand unten: 20px;
    Hintergrundfarbe: #f5f5f5;
    Randradius: 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 {
    Hintergrundbild: 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);
    Hintergrundgröße: 40px 40px;
    schweben: links;
    Breite: 0 %;
    Höhe: 100 %;
    Schriftgröße: 12px;
    Zeilenhöhe: 20px;
    Farbe: #000000;
    Schriftdicke: fett;
    Textausrichtung: Mitte;
    -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 3sease;
    -moz-transition: Breite 3s Leichtigkeit;
    -o-Übergang: Breite 3s Leichtigkeit;
    Übergang: Breite 3s Leichtigkeit;*/
    Animation: Fortschrittsbalkenstreifen 2s linear unendlich;
    Hintergrundfarbe: #288ade;
}

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

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

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

谢了.

Answer 1

我已经找到解决办法了。错误是我将 async 一词放在 res.forEach 中。当我将其放在 fetch.then 之后并使用 for 循环而不是 forEach 时，函数执行的行为发生了变化并且可以成功完成。 loadNumber 变量可用于确定每单位时间将在数据表中绘制多少数据。

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>