Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How would I Increment a number in a way where it shows every step instead of skipping numbers?

So for example in my code:

        numbersGoingUp() {
            const atoms = this.user.resources[0]
            const molecules = this.user.resources[1]
            const atom_gens = this.user.generators[0]
            const molecule_gens = this.user.generators[1]

            if (!this.interval) {
                this.interval = setInterval(() => {
                    if (atom_gens.active) {
                        if (atoms.amount >= atoms.max) {
                            return
                        } else {
                            atoms.amount += atom_gens.amount
                        }
                        if (molecule_gens.active) {
                            if (molecules.amount >= molecules.max) {
                                return
                            } else {
                                molecules.amount += molecule_gens.amount
                            }
                        }
                    }
                }, 1000);
            }
        },

If the number to increment by were to stay 1 then there would be no issue whatsoever however when I set the number to increment by to a 2 for example it would increment the following way: 2…4…6…8 and so on.

What I want is for the incrementing number to show every step. So even if it’s incrementing by 3 every second I want to see: 1…2…3…4…5 and so on.

Sorry if the wording is bad or if it’s hard to understand. Any help is appreciated! 😀

I have tried setting the interval time to different values and while that does somewhat do what I want but not in a way that would be easy to manage going forward.

Tags:

2

Answers


  1. 0

    The way step works is by actually incrementing the counter by the step, which I will be using 2 for this example. If you get the step as 2, the counter is going to be:

    2, 4, 6, 8, 10, ...

    And this is the default and expected behavior.
    If you want to make it show every step, make the interval run faster and print every single one:

    numbersGoingUp() {
            const atoms = this.user.resources[0]
            const molecules = this.user.resources[1]
            const atom_gens = this.user.generators[0]
            const molecule_gens = this.user.generators[1]

            if (!this.interval) {
                this.interval = setInterval(() => {
                    if (atom_gens.active) {
                        if (atoms.amount >= atoms.max) {
                            return
                        } else {
                            atoms.amount += atom_gens.amount
                        }
                        if (molecule_gens.active) {
                            if (molecules.amount >= molecules.max) {
                                return
                            } else {
                                molecules.amount += molecule_gens.amount
                            }
                        }
                    }
                }, 500); // For running twice as fast, and you can make it scale with your molecules_gens.amount or atom_gens.amount by using 1000 / atom_gens.amount or molecules_gens.amount
            }
        },
    Login or Signup to reply.
  2. 0

    If you are set on keeping your interval / steps where they are at, you could do:

     const timeout = 1000
 setInterval(() => {
     // ...
     amount = atom_gens.amount
     timeSlice = timeout / amount
     for (i = 0; i < amount; i++) {
         setTimeout(() => {
             atoms.amount += 1
         }, timeSlice * i) // e.g. atom_gens.amount = 3: 
                           // 0 -> 1 at 0ms
                           // 1 -> 2 at 333ms
                           // 2 -> 3 at 666ms
     }
 }, timeout);

    E.g.

     const timeout = 1000
 const output = document.getElementById('output');
 const atoms = { 
     set amount(value) {
         this.value = value
         output.innerHTML = value
     },
     get amount() { 
         return this.value
     }, 
     value: 0
 }
 const atom_gens = { amount: 3 }
 
 setInterval(() => {
     amount = atom_gens.amount
     timeSlice = timeout / amount
     for (i = 0; i < amount; i++) {
         setTimeout(() => {
             atoms.amount += 1
         }, timeSlice * i) // e.g. atom_gens.amount = 3: 
                           // 0 -> 1 at 0ms
                           // 1 -> 2 at 333ms
                           // 2 -> 3 at 666ms
     }
 }, timeout);
    <div id="output"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search