JSFiddle - React, Tailwind, and code Playground

by der_robert

HTML

<div id="zahlenreihe"></div>
<br />
<button id="nochmal">nochmal</button>
<button id="weiter_10">+10</button>

JavaScript

$(document).ready( function() {
    var start = 1; // startwert
    var ende = 10; // endwert
    var zeitlicher_abstand = 0.5; // in Sekunden (für eine halbe Sekunden -> 0.5 (wichtig ist - immer Punkt statt Kommata))
    
    zahlenreihe(start,ende);
    
    function zahlenreihe(start,ende){
        var z = 1; // für den zeitlichen abstand
        // definiere 1 mit dem inhalt von start, Abbruchbedingung ist wenn i kleiner gleich ende, erhöhe i um 1    
        for(i = start;i <= ende;i++){            
            // HTML element -> append = "am ende IM Element anfügen" -> die zählvariable i
            // setTimeout verzögert die Ausgabe um x Millisekunden (1000ms = 1s)
            setTimeout(function(i) {
                $("#zahlenreihe").append("<div>"+i+"</div>");
                
            // hier muss man den abstand in ms mit der aktuellen Zahl multiplizieren, würde man das weg lassen würden troz setTimeout alle Zahlen nach einer Sekunde erscheinen   
            },zeitlicher_abstand*1000*z,i);    
                        
            z++; // aktuelles Element - zähjlt nur von 1 bis x
        }
    }
    
    $("#nochmal").on("click",function(){
        // Element leeren
        $("#zahlenreihe").html("");
        zahlenreihe(start,ende);    
    });
    
    $("#weiter_10").on("click",function(){
        var weiter = parseInt($("#zahlenreihe div:last-child").text());
        start = weiter + 1;
        ende += 10;
        zahlenreihe(start,ende);    
    });
    
});