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>

the loop gets done without waiting at all, and you only see the result of the last wyswietlLiczbe call — IrkenInvader
– IrkenInvader, Commented Nov 16, 2017 at 18:14

IrkenInvader · Accepted Answer · 2017-11-16 18:19:07Z

3

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>

answered Nov 16, 2017 at 18:19

IrkenInvader

4,0401 gold badge14 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

siemaeniu500 Over a year ago

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 Over a year ago

@siemaeniu500 there is no sleep function in JavaScript. The idea of the lang is/was to be single threaded and async.

IrkenInvader Over a year ago

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 Over a year ago

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)

splitwire · Accepted Answer · 2017-11-16 18:23:37Z

1

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);

answered Nov 16, 2017 at 18:23

splitwire

2971 silver badge6 bronze badges

Comments

Faan Veldhuijsen · Accepted Answer · 2017-11-16 18:23:59Z

1

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>

answered Nov 16, 2017 at 18:23

Faan Veldhuijsen

1065 bronze badges

Comments

Aswin Ramesh · Accepted Answer · 2017-11-16 18:36:39Z

0

you can use setInterval instead

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

answered Nov 16, 2017 at 18:36

Aswin Ramesh

1,6741 gold badge13 silver badges13 bronze badges

Collectives™ on Stack Overflow

javascript counter using for loop

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related