javascript counter using for loop

Question

I've created a simple counter using javascript but there is a problem Field "display" starts from 1, but it should start from 100 and goes low. The console logs shows values correctly from 100 to 1. I have to use loops to do this tasks, so please not replace it using recursion :) Also the timeout is for sure does not equal to 100ms, it's more

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>

• IrkenInvader: the loop gets done without waiting at all, and you only see the result of the last wyswietlLiczbe call

Answer 1

Since the loop executes immediately, you need to wait an increasing amount of time for each number. This will queue up the innerHTML modifications.

As it is now, after a 100ms wait all 100 wyswietlLiczbe are executed in rapid succession.

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>

• siemaeniu500: Ok i didn't know i have to wait an increasing amount of time for each number and queue up the modifications. It's typical to javascript ? I can't find functions in javascript like sleep in C# / Java/ Python :)
• Bakudan: @siemaeniu500 there is no sleep function in JavaScript. The idea of the lang is/was to be single threaded and async.
• IrkenInvader: I would probably do it with recursion, waiting 100ms between each call. To do it with the for loop like you requested you have to stack up the waits. In javascript the way you sleep is with setTimeout. This could also be accomplished with setInterval (basically a setTimeout that continuously loops).
• Dorian: Is there also a possibility to do that by using something like tic-toc in MATLAB, plus a while time<toc // do nothing end loop in JScript? (Sorry for bad formatting, I'm on my phone)

Answer 2

Build the conditional into the function which will execute after the timeout.

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

Answer 3

I don't know exactly what you want but I think this is what you're looking for.

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

you can use setInterval instead

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