按住鼠标的 Javascript 增加值更快

This question already has answers here:

Incrementing value continuously on mouse hold

(4 个回答)


3年前关闭。




我有这个脚本，每次单击按钮时都会将值加 1:

<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>

但是我想调整它，这样如果我按住鼠标按钮，它就会重复，所以我不必一遍又一遍地按下它。

有什么方法可以使用 javascript 做到这一点？或者jquery适合吗？

最佳答案

为此，您需要使用 mousedown 事件来启动超时(这是增量计数开始之前的延迟)和间隔(进行重复计数)。您还需要一个 mouseup 和 mouseleave 处理程序来删除这两个计时器。试试这个:

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>