Javascript increment value faster with mouse hold [duplicate]

Question

I have this script that adds 1 to a value every time I click on a button:

<script>
    function incrementValue(id) {
       var value = parseInt(document.getElementById(id).innerHTML);
       value = value + 1;
       document.getElementById(id).innerHTML = value;
    }
</script>

<button onclick="incrementValue('skill_1')"> add </button><br>
<span id=skill_1>0</span>

However I want to adjust it so that if I hold down the mouse button, it'll repeat so I don't have to keep pressing it over and over.

Any way to do that using javascript? Or would jquery suit?

Answer 1

To achieve this you need to use the mousedown event to start a timeout (which is the delay before the incremental count starts) and an interval (which does the repeated counting). You'll also need a mouseup and mouseleave handler to remove both of those timers. Try this:

var timeout, interval;

[].forEach.call(document.querySelectorAll('.add'), function(button) {
  button.addEventListener('mousedown', function() {
    var id = button.dataset.target;
    incrementValue(id);
    
    timeout = setTimeout(function() {
      interval = setInterval(function() {
        incrementValue(id);
      }, 50);    
    }, 300);
  });
  
  button.addEventListener('mouseup', clearTimers);
  button.addEventListener('mouseleave', clearTimers); 
  
  function clearTimers() {
    clearTimeout(timeout);
    clearInterval(interval);
  }
});

function incrementValue(id) {
  var el = document.getElementById(id);
  var value = parseInt(el.textContent, 10);
  document.getElementById(id).textContent = ++value;
}

<button class="add" data-target="skill_1">add</button><br />
<span id="skill_1">0</span>

Answer 2

You'll need 3 event handler:

1. mousedown that will call a function, that will call itself with a timeout (continuosIncerment) while the mouse button is pressed.
2. mouseup that will clear the timeout when the button is released.
3. mouseleave that clears the timeout when the mouse leaves the button area.

const btn = document.querySelector('#btn');
const skill_1 = document.querySelector('#skill_1');
let value = 0;
let timer;

function continuosIncerment() {
  skill_1.innerHTML = ++value;
  
  timer = setTimeout(continuosIncerment, 200);
}

function timeoutClear() {
  clearTimeout(timer);
}

btn.addEventListener('mousedown', continuosIncerment);

btn.addEventListener('mouseup', timeoutClear);

btn.addEventListener('mouseleave', timeoutClear);

<button id="btn"> add </button><br>
<span id="skill_1">0</span>