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
 
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.
 
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.
 
Ich weiß zwar nicht warum ich solche schwankungen habe, aber ich komme immer auf 4000 - 4100 Millisekunden.( falls ich den Timer richtig eingebaut habe )
Meistens aber immer sehr nahe an 4000 , also kann ich nichts ungenaues erkennen

Link zur Lösung
 
Zuletzt bearbeitet:
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 (?).
 
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.
 
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.
 
Zuletzt bearbeitet:
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.
 
Sollte ihn vielleicht mal wieder entrümpeln.

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