<p>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.</p> <p><br /></p> <pre class="brush:js;toolbar:false;">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(); });</pre> <pre class="brush:css;toolbar:false;">.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; } }</pre> <pre class="brush:html;toolbar:false;"><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></pre> <p><br /></p> <p>Die Tabelle wurde erfolgreich geladen, aber der Fortschrittsbalken zeigt <code>100 %</code> statt von <code>0 %</code> Code>. Ich habe mich gefragt, ob es funktionieren würde (<em>aber nicht perfekt</em>), wenn ich keine Datentabelle verwenden würde, wie im folgenden Code gezeigt.</p> <p><br /></p> <pre class="brush:js;toolbar:false;">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 } })();</pre> <pre class="brush:css;toolbar:false;">.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; } }</pre> <pre class="brush:html;toolbar:false;"><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></pre> <p><br /></p> <p>谢了.</p>

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>