JavaScript Count-Up Javaskript

Ehlers22 · 14. Juni 2016

Hallo liebe Forengemeinde,
ich habe das folgende Javaskript zum hochzuholen meiner Bewerteten Hotels:

HTML:

 <script type='text/javascript'>
//<![CDATA[
    <!--
    function time() {
    if (i < 36) {
    i++;
    document.getElementById('spanId').innerHTML = i;
    } else {
    window.clearInterval(inverval);
    }
    }
    var i=0;
    var interval = window.setInterval('time()', 5);
    //-->
    //]]>
    </script><span id="spanId"></span>

Mein Problem ist Folgendes: Ich möchte dieses Skript mehrmals ausführen, doch es ist nur einmal möglich. Ein zweites wird nicht ausgeführt. Kann mir einer helfen? Vielen Dank im Voraus :-)

micha-ilm · 14. Juni 2016

setInterval(time,5)

time ohne ()

dann sollte es laufen

Ehlers22 · 14. Juni 2016

Hallo,
vielen Dank für die schnelle Antwort.
Das Problem ist leider nicht gelöst.

Ich kann den Code einmal verwenden. Ein Zweites mal kann ich den Code in einer Tabelle zwar einbauen, er wird aber nicht genutzt...

Ergänzung (14. Juni 2016)

Ich habe noch nicht ganz verstanden, wie ich das Script doppelt einbinden kann, so dass es auch 2 mal funktioniert

T0a5tbr0t · 14. Juni 2016

Einfach den Code in eine extra Funktion stecken, sonst sind die Variablen global. Und die Element-id einfach als Argument in die neue Funktion übergeben, dann kann sie einfach mehrmals mit den passenden id's aufgerufen werden.

Code:

function countUp(id) {
  var el = document.getElementById(id);
  function time() {...}
  // ...
}

countUp("span-1");
countUp("span-2");

micha-ilm · 14. Juni 2016

so wie ich dein script jetzt verstehe zählt es im Intervall von 5ms bis i=35.
Danach wird das Intervall gestoppt.

Was genau hast du vor?
Wenn du das Intervall nochmal laufen lassen willst, musst du es natürlich irgendwo erneut setzen und i wieder auf 0 setzen.

fz21z · 14. Juni 2016

Abend, vll. hilft dir das jsfiddle hier weiter.

Code:

var c = 0,
      l = 5;
function loop() {
	var t = setTimeout(loop, 1000);
        c++;
        if(c === l)
  	     clearTimeout(t);
    
         console.log('c: ' +c);
}

loop();

Froschkoenig84 · 15. Juni 2016

Code:

var i = 0;
var interval = window.setInterval(function() {
 if(i++<36) {
  console.log('+');
 } else {
  window.clearInterval(interval);
 }
}, 500);

//siehe: https://jsfiddle.net/92veq8de/1/

jrtthrt4352ghdfh645tsr4fu5i46h677grhr4782t75gziurg8zg34r.png

1) Also 5ms sind für die meisten PCs generell etwas zu schnell. Selbst das Rendering einzelner DOM-Objekte benötigt fürgewöhnlich länger. Daher hab ich das mal auf 500ms hochgesetzt.

2) Eigentlich brauchst du kein Interval, denn im Gegensatz zum Timeout-Loop wird es eigentlich verwendet, wenn eine unbestimmte Anzahl an Durchläufen vermutet werden, die dann aufgrund eines Events (User: Klick auch Button || Server: Empfang von AJAX-Daten) unterbrochen wird. In deinem Fall willst du 36 Wiederholungen, daher empfehle ich dir ein Loop-Timeout-Konzept. Wobei ich nicht sicher bin, wozu du überhaupt ein Timeout (Verzögerung, Wartezeit bis zum nächsten Durchlauf) benötigst.

Code:

for(var i = 0;i<36;i++) { ... }

sollte eigentlich völlig genügen.

3) Ich habe dein Script dennoch mal mittels Interval umgesetzt, bzw. geprüft. Meiner Ansicht läuft es. Ich bekomme in diesem Fall 36 Log-Einträge, danach beendet/löscht er das Interval.

Suche

JavaScript Count-Up Javaskript

Ehlers22

Newbie

micha-ilm

Gast

Ehlers22

Newbie

T0a5tbr0t

Lieutenant

micha-ilm

Gast

fz21z

Lt. Junior Grade

Froschkoenig84

Cadet 3rd Year

Ähnliche Themen