Estoy tratando de implementar un programa en el que el usuario hace clic en un botón y un valor comienza a aumentar a una velocidad determinada. Para simplificar, digamos que aumenta en 1 por segundo.
Cada vez que el usuario presiona el botón, comenzará a aumentar más rápido, digamos que lo presiona dos veces más y ahora aumenta a 3 por segundo.
Siento que necesito usar el método setInterval pero tengo problemas con la implementación y específicamente con la forma en que aumentaría la tasa. Aquí está mi HTML:
<button type="button" onclick="counter();">Counter</button> <span id="count"></span>Sí, puede usar setInterval o setTimeout . Entonces, básicamente, la idea es establecer el step inicial en 0 .
Inicie un ciclo que aumenta el volumen por número de step .
Cada vez que presiona el botón, aumenta el número de step :
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> Otro enfoque es disminuir la velocidad de setInterval con cada paso:
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>No entiendo completamente su caso de uso. Pero según tu explicación, puedes hacer lo que quieras así.
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>¿Qué pasa con esto?
Si desea acelerar el intervalo, no el delta, esto puede ayudarlo.
Esto reduce el tic a medida que se hace clic en el botón, hasta que el tic alcanza los 10 ms.
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>