Progressbar setInterval Exaktheit der Zeitmessung

Jofre

Erfahrenes Mitglied
Güß Euch miteinander,


ich möchte eine Progressbar haben, die eine verbleibende Zeit anzeigt.

Ich habe eine kleine Funktion, die das im Prinzip macht. Sie ist aber ungenau mit der Zeit.
Code:
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="500" height="600"></canvas>

<script>

var canv = document.getElementById("canvas");
var ctx = canv.getContext("2d");

  function progMinus(x,y,w,h,zeit,iz){
    //x, y , w, h Eingangsgrößen für das Rechteck Progressbar
    // zeit gibt an wieviel Sekunden die Progressbar aktiv ist
   // iz Aufruf setInterval

    var ist =w;
    zeit=zeit*1000;
    var progInterval = setInterval (function() {
    
    ist=ist-(w/zeit)*iz;   
    ctx.fillStyle = "black";
    ctx.clearRect(x,y,w,h);   
    ctx.strokeRect(x,y,w,h);   
    ctx.fillRect(x,y,ist,h);

    if( ist<=0 ) clearInterval(progInterval);
    }, iz);
    
  }
 
 progMinus(50,50,200,10,4,10);

</script>

</body>
</html>


Ich möchte, dass in möglichst vielen Schritten (iz=10 gesetzt,Fließeffekt) in diesem Beispiel das ausgefüllte Rechteck von 200 px Länge in 4 Sekunden auf 0 zurückgesetzt wird.

Das Ergebnis ist ungenau. Liegt es an meinem Ansatz oder habe ich bei der Berechnung des Rest Rechtecks einen Fehler

GzG

Joachim
 

Sempervivum

Erfahrenes Mitglied
Wie hast Du denn heraus gefunden, dass es ungenau ist? Bei 4 sec kann man mit einer Stoppuhr doch kaum etwas messen. Es sei denn, die Abweichung ist so drastisch, dass sie ins Auge springt.
 

StormChaser

Mitglied
Bei mir gibt es zwar keinen Fehler für
var ist =w;
aber ansonsten läuft es doch so, wie ich es erwarten würde.
Was meinst du mit "Das Ergebnis ist ungenau. " ?

edit: Huch, das mit "var ist =w;" ist ja gar kein Kommentar. Also alles gut; sah nur seltsam aus.
 

StormChaser

Mitglied
Beim ersten Aufruf von deinem Script, @basti1012, hatte ich 4402 Millisekunden.
Beim zweiten 4241 Millisekunden.
Beim dritten 4271 Millisekunden.
Beim vierten 4181 Millisekunden.

Es sollte aber wohl GENAU 4000 sein; das ist wohl mit ungenau gemeint (?).
 

Jofre

Erfahrenes Mitglied
Ich habe mit der Stopuhr meines Handy's gemessen. Ich habe jetzt gerade mit zeit = 20 getestet. Das Handy meldete 30 Sekunden statt 20. Zeit = 40 brauchte lt. Hany 61 Sekunden.
 

basti1012

Erfahrenes Mitglied
Mit der Stopuhr des Handys wirst du das nie genau hinbekommen, gerade bei 4 Sekunden.Du weißt ja nie genau wenn du start drücken mußt und nie genau wann stop.Bei einen Start Button des Scriptes kommst du da vieleicht schon etwas genauer dran.
So startet das Script ja erst wenn es geladen ist und das kannst du mit dein Handy nicht genau erfassen.

Hier mal mit Startbutton, da kannst du sehen das es nah an die 4000 dran kommt
https://codepen.io/basti1012/pen/ExYZGZq?editors=1000
 
Zuletzt bearbeitet:

Sempervivum

Erfahrenes Mitglied
Mit der letzten Version von Bastis Skript passt es bei mir bis auf wenige Millisekunden. Vermutlich ist dein Rechner nicht der schnellste. Ein 10-Millisekunden-Intervall ist aber auch sehr kurz und eine Herausforderung für den Rechner. 40 würden eine Framerate von 25 fps ergeben und auch ausreichen. Oder am besten auf requestAnimationFrame umstellen.
 

Jofre

Erfahrenes Mitglied
Sollte ihn vielleicht mal wieder entrümpeln.

Könntest du mir es bitte zeigen wie es mit dem Frame gelöst wurde?.