Progressbar verlangsamen

tklustig

Erfahrenes Mitglied
Hallo Leute, folgender Code soll erwirken, dass sich eine Progressbar mit zunehmender Länge verlangsamt.
Die Animation der Progressbar funktioniert, allerdings verlangsamt sie sich nicht ab dem Schwellenwert 25. Sie verschnellert sich für einen kurzen Augenblick, um sodann in eine chaotische Anzeige überzugehen.
Weiß jemand Rat?
Hier der JS Code:
Code:
    function move() {
        var element = document.getElementById("myBar");
        var width = 1;
        var id = setInterval(frame, 125);
        function frame() {
            if (width >= 25)
                id = setInterval(frame, 225);
            else if (width >= 50)
                id = setInterval(frame, 300);
            if (width >= 100) {
                clearInterval(id);
                move();
            } else {
                width++;
                element.style.width = width + '%';
                element.innerHTML = width * 1 + '%';
            }
        }
    }
hier der HTML-Code
HTML:
<div class="w3-container">
    <h3>Connecting IMAP Server...</h3>
    <div class="w3-light-grey">
        <div id="myBar" class="w3-container w3-green w3-center" style="width:3%">0%</div>
    </div>
</div>
 
Got it by my own. Folgende Codezeile muss vor der Neuzuweisung eingefügt werden:
Code:
clearInterval(id);
 
Hey tklustig,
genau und noch ein kleiner Verbesserungsvorschlag.

Wenn du noch eine Variable mit dem aktuellen Interval hinzufügst kannst du bei der Abfrage nach der aktuellen Position noch verhindern, dass der immer wieder neu gesetzt wird.
So z.B.

Javascript:
var curinterval = 125;
var id = setInterval(frame, curinterval);
function frame() {
  if (width >= 25 && curinterval == 125 ) {
    curinterval == 225
    clearInterval(id);
    id = setInterval(frame, curinterval);
  } else if (width >= 50 && curinterval == 225 ) {
    curinterval == 300
    clearInterval(id);
    id = setInterval(frame, curinterval);
  }
...

Das spielt vielleicht bei so ein kurzen Skript keine große Rolle, aber wenn noch mehr Skripte laufen kann es vielleicht zu einen Faktor werden.
 
Zurück