Javascript-Zähler mit for-Schleife

Question

Ich habe einen einfachen Zähler mit Javascript erstellt, aber es gibt ein Problem Feld "Anzeige" beginnt von 1, aber es sollte von 100 beginnen und wird niedrig. Die Konsolenprotokolle zeigen Werte korrekt von 100 bis 1. Ich habe Loops verwenden, um diese Aufgaben zu tun, also bitte nicht ersetzen Rekursion :) Auch das Timeout ist sicher zu 100ms nicht gleich, es ist mehr

function wyswietlLiczbe(j) { 
 
    setTimeout(function() { 
 
     document.getElementById("display").innerHTML = j; 
 
    }, 100); 
 
} 
 

 
for (var i= 100; i > 0; i--){ 
 
    console.log(i) 
 
    wyswietlLiczbe(i); 
 
}

<p id="display"></p>

Answer 1

Da die Schleife sofort ausführt, müssen Sie für jede Zahl eine zunehmende Menge an Zeit warten. Dadurch werden die innerHTML Änderungen anstehen.

Wie es jetzt ist, nach 100ms Wartezeit werden alle 100 wyswietlLiczbe in schneller Folge ausgeführt.

function wyswietlLiczbe(j, waitTime) { 
 
    setTimeout(function() { 
 
     document.getElementById("display").innerHTML = j; 
 
    }, waitTime); 
 
} 
 

 
for (var i= 100; i > 0; i--){ 
 
    console.log(i) 
 
    wyswietlLiczbe(i, (101 - i) * 100); 
 
}

<p id="display"></p>

Answer 2

die bedingte in die Funktion bauen, die nach dem Timeout ausgeführt wird.

var elmD = document.getElementById("display"); 

function wyswietlLiczbe(j) { 
    setTimeout(function() { 
     elmD.innerHTML = j; 

     j--; 

     if(0 <= j) { 
     wyswietlLiczbe(j) 
     } 
    }, 100); 
} 

wyswietlLiczbe(100); 

Answer 3

Ich weiß nicht genau, was Sie wollen, aber ich denke, das ist, was Sie suchen.

function wyswietlLiczbe(j) { 
 
    if (j >= 0) { 
 
     setTimeout(function() { 
 
      document.getElementById("display").innerHTML = j; 
 
      j--; 
 
      wyswietlLiczbe(j); 
 
     }, 100); 
 
    } 
 
} 
 

 
wyswietlLiczbe(100);

<p id="display"></p>

Answer 4

können Sie setInterval anstelle

function wyswietlLiczbe(j) { 
    x = setInterval(function() { 
     if(j==0) clearInterval(x); 
     document.getElementById("display").innerHTML = j--; 
    }, 100); 
} 
wyswietlLiczbe(100);