I am trying to implement a program where the user clicks a button and a value starts increasing at a given rate. For simplicity, let's say that it increases by 1 per second.
Every additional time the user presses the button, it will start to increase faster, say you press it two additional times and now it's increasing at 3 per second.
I feel like I need to use the setInterval method but I'm having trouble with the implementation and specifically how I would go about increasing the rate. Here's my HTML:
<button type="button" onclick="counter();">Counter</button>
<span id="count"></span>
Yes, you can use setInterval or setTimeout.
So basically the idea is set initial step to 0.
Initiate loop which increases the volume by step number.
Each time button pressed you increase step number:
var step = 0,
count = 0,
res = document.getElementById("count");
var timer = setInterval(loop, 1000);
loop();
function loop() {
count += step;
res.textContent = count;
}
function counter() {
step++;
}<button type="button" onclick="counter();">Counter</button>
<button type="button" onclick="step=0;count=0">Reset</button>
<span id="count"></span>Another approach is to decrease setInterval speed with each step:
var count = 0,
step = 0,
res = document.getElementById("count");
var timer;
loop();
function loop() {
res.textContent = count++;
}
function up() {
step++;
counter();
}
function down() {
step--;
if (step < 1)
step = 1;
counter();
}
function counter() {
clearInterval(timer);
timer = setInterval(loop, 1000 / step);
}
function reset() {
clearInterval(timer);
step = 0;
count = 0;
loop();
}<button type="button" onclick="up();">Up</button>
<button type="button" onclick="down();">Down</button>
<button type="button" onclick="reset()">Reset</button>
<span id="count"></span>I don't fully understand your usecase. But based on your explanation you can do what you want like this.
const counterButton = document.querySelector('#counter');
const countDisplay = document.querySelector('#count');
delta = 0;
currentVal = 0;
interval = null;
const updateVal = () => {
currentVal += delta;
countDisplay.innerHTML = currentVal;
}
counterButton.addEventListener('click', () => {
delta += 1;
if (!interval) {
updateVal()
interval = setInterval(() => {
updateVal()
}, 1000)
}
})<button type="button" id="counter">Counter</button>
<span id="count"></span>What about this?
If you want to speed up interval, not the delta, this can help you.
This reduce the tick as button clicks, until the tick reaches to 10ms.
var dlta = 0;
var sum = 0;
var interval;
let tick = 1000;
function onInterval() {
sum += 1;
$('#count').html(sum);
}
function counter() {
dlta++;
if (interval)
clearInterval(interval);
interval = setInterval(onInterval, tick);
tick -= 1000 / (dlta + 5);
if (tick < 0) tick = 10;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" onclick="counter();">Counter</button>
<span id="count"></span>