Progressbar setInterval Exaktheit der Zeitmessung

Mit requestAnimationFrame könnte es so aussehen:
Code: 
<!DOCTYPE html>
<html>

<body>
    <input type="button" id="start" value="start">
    <div id="clock"></div>
    <canvas id="canvas" width="500" height="600"></canvas>
    <script>
        var x = 50, y = 50, w = 200, h = 10;
        var total = 4000;
        var vstart;
        var canv = document.getElementById("canvas");
        var ctx = canv.getContext("2d");
        function doIt() {
            // die vergangene Zeit;
            var gone = Date.now() - vstart;
            document.getElementById('clock').innerHTML = gone + ' Millisekunden';
            // die verbleibende Zeit
            var remaining = total - gone;
            // die Breite des Balkens
            var ist = remaining / total * w;
            // Progressbar zeichnen
            ctx.fillStyle = "lightblue";
            ctx.strokeStyle = "black";
            ctx.strokeWidth = 2;
            ctx.clearRect(x, y, w, h);
            ctx.strokeRect(x, y, w, h);
            ctx.fillRect(x, y, ist, h);
            // wenn die verbleibende Zeit groesser als 0 ist,
            // erneuten Aufruf der Funktion doIt veranlassen
            if (remaining > 0) requestAnimationFrame(doIt);
        }
        lo = document.getElementById('start');
        lo.addEventListener('click', function () {
            vstart = Date.now();
            doIt();
        }); 
    </script>
</body>

</html>
 
Ja(y) Mit requestAnimationFrame läuft es bei mir auch besser, die Ergebnisse sind Konstanter und es werden auch wenniger recourcen gebraucht. Das merkr ich vor allem bei meinen Laptop de ist ca 10 Jahre alt und nicht mehr der schnellste..

Ich weiß gar nicht mehr genau wie das wahr , aber wahr ein fps von 60 oder mehr gar nicht mehr möglich oder wie wahr das ?
60fps sind ca 17 Millisekunden ?
Also währe ein setInterval von 10ms ja sowieso kaum möglich ,was die großen unterschiede erklären die oben noch rausgekommen sind.

Weiß das einer von euch noch wie das genau wahr ? Konnte bis jetzt noch nix genaues finden obwoh ich das mal irgend wo im Netz gefunden hatte
 
Also ich hatte bei meiner letzten Anfrage ein github-Projekt (es war eines von diesen; welches weiss ich leider nicht mehr) zugrunde, das auch requestAnimationFrame einsetzt und auch die Framerate ausgeben konnte. Da waren es immer ca. 75,03 fps. Und das bei bis zu 1.500 bewegten Objekten (weiter hatte ich noch nicht getestet).

edit: Irrtum. Das Original hatte setTimeout. Das requestAnmationFrame hatte ich über die Suche nach setInterval gefunden und eingebaut.

Bei den Werten habe ich mich dann allerdings gefragt, ob das überhaupt noch stimmen kann, weil dieser Rechner nun wirklich betagt ist (CPU-Z sagt dazu:

cpuz-klein-20190824.png.

Allerdings war mit meiner Skepsis an der angezeigten Framerate auch das weitere Interesse verflogen, weil es ja letztlich auf "läuft" oder "läuft nicht" hinausläuft :)
 
Zuletzt bearbeitet:
Sehr schön.

ich möchte diese Progressbar in diversen Anwendungen nutzen.
Bei meinem Ansatz hatte ich alle Variablen in der Parameterleiste. So kann ich die Funktion zentral speichern und rufe sie in den einzelnen Anwendungen lediglich mit dem Funktionsaufruf auf ( Siehe oben bei meinem Ansatz.)

Soweit ich das mit meinen eingeschränkten Wissen sehe ist das bei dem Ansatz von Sempervivum nicht möglich. Hier muss ich dann jedesmal die einzelnen Variablen neu definieren . Ich kann keine "umhüllende" Funktion dafür nutzen. Ich habes es jedenfalls nicht geschafft.
 
Doch, das ist kein Problem:
Code: 
        function startTimer(x, y, w, h, total) {
            var vstart = Date.now();
            var ctx = document.getElementById("canvas").getContext("2d");
            function doIt() {
                // die vergangene Zeit;
                var gone = Date.now() - vstart;
                document.getElementById('clock').innerHTML = gone + ' Millisekunden';
                // die verbleibende Zeit
                var remaining = total - gone;
                // die Breite des Balkens
                var ist = remaining / total * w;
                // Progressbar zeichnen
                ctx.fillStyle = "lightblue";
                ctx.strokeStyle = "black";
                ctx.strokeWidth = 2;
                ctx.clearRect(x, y, w, h);
                ctx.fillRect(x, y, ist, h);
                ctx.strokeRect(x, y, w, h);
                // wenn die verbleibende Zeit groesser als 0 ist:
                // erneuten Aufruf der Funktion doIt veranlassen
                if (remaining > 0) requestAnimationFrame(doIt);
            }
            doIt();
        }
        lo = document.getElementById('start');
        lo.addEventListener('click', function () {
            startTimer(50, 50, 200, 20, 4000);
        });
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück