How can I use a variable as my SetInterval speed.

TheJedi · February 13, 2020

I am writing a simple counter in JavaScript and just playing around to see if i can change the speed of the count.

I am trying to use the variable counterSpeed instead of a number in the setInterval function

Please tell me where I am going wrong

let x = 0;
let counterSpeed = 1000;
let intervalId = null;
//? HTML Elements
const listener = document.getElementById('listener');
const numberPlace = document.getElementById('numberPlace');
const fast = document.getElementById('fast');
const faster = document.getElementById('faster');
const superFast = document.getElementById('superFast');

// ? Counting interval function
const numberCounter = () => {
  if (intervalId === null) {
    intervalId = setInterval(() => {
      x++;
      numberPlace.innerHTML = x;
    }, 1 * counterSpeed);
  } else {
    clearInterval(intervalId);
    intervalId = null;
  }
};

//onClick listeners
listener.addEventListener('click', numberCounter);

const countFast = () => {
  counterSpeed = 100;
  console.log(counterSpeed);
};

fast.addEventListener('click', countFast);

When Click the button with the id of listener, it doesn't do anything. So how can i fix this

mariushm · February 13, 2020

Here's a suggestion... have your function trigger at a fixed interval, like 10 ms or 100 ms. Increment a variable every time the function is called by setInterval but only update the number when the threshold is reached.

See code below as an example:

You may want to reset the TimerValue variable when you go from a Fast setting to a lower setting... think about it as homework.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button id="btnNormal" >Normal</button>
    <button id="btnFast" >Fast</button>
    <label id="lblCounter">123</label>
    <script>

        const btnNormal = document.getElementById('btnNormal');
        const btnFast = document.getElementById('btnFast');
        const lblCounter = document.getElementById('lblCounter');

        lblCounter.innerText = 0;

        let timerTick = 10; // 10 ms, every 10ms run ticker() function
        let timerUpdate = 1000; // only update counter when more than this many ms have passed
        let timerValue = 0; // this variable actually holds the ms passed after previous counter update
        
        let x = 0; // the counter value

        const ticker = () => {
            timerValue += timerTick
            if (timerValue>timerUpdate) {
                // do stuff
                x++
                lblCounter.innerText = x
                timerValue = timerValue - timerUpdate
            }
            //console.log('tick');
        }

        const updateNormal = () => { timerUpdate = 1000; }
        const updateFast = () => { timerUpdate = 500; }

        btnNormal.addEventListener('click',updateNormal);
        btnFast.addEventListener('click',updateFast);
        const timerHandle = setInterval(ticker,timerTick)
    
      	// when done, clearInterval(timerHandle) or something like that. 
    </script>

</body>
</html>