SetTimeout 只在鼠标按下时执行一次

Question

我想要做的就是将框中显示的数字增加 1，并且只要鼠标按下，它就会每 100 毫秒执行一次。该函数会执行，但无论按住鼠标多长时间都不会执行超过一次。每次在此元素上发生 mousedown 事件时，它只会将变量增加 1，我可以在框中看到这一点，而我希望看到只要鼠标保持按下状态，数字就会继续快速增加。是否有任何用于 mouseup 事件的代码可以阻止此 mousedown 事件继续在 setTimeout 中执行该函数，或者是否存在某种我遗漏的规则？奇怪的。

var mouseDownCount = 0;

$("#addButton").mousedown(function () { startMouseCount(); }); 

function startMouseCount() {
  $("mouseCount").html(mousedownCount)

  mdcTimer = window.setTimeout(function () {
    mousedownCount++;
    $("#mouseCount").html(mousedownCount);
  }, 100);

  return false;
}

Answer 1

您的代码有很多问题：

• 您正在引用mousedownCount多次，当你的变量mouseDownCount。大小写一致性很重要。
• 您错过了（应该是）中的#ID 参考。$("mouseCount")$("#mouseCount")

除此之外，您正在寻找setInterval()而不是setTimeOut()，因为setInterval()会触发多次，而setTimeOut()只会触发一次。

请注意，您可能还想无限期地停止计时器，这可以在mouseUp：

这是一个工作示例：

var mouseDownCount = 0;

$("#addButton").mousedown(function() {
  startMouseCount();
});

$("#addButton").mouseup(function() {
  endMouseCount();
});

function startMouseCount() {
  $("#mouseCount").html(mouseDownCount)
  mdcTimer = window.setInterval(function() {
    mouseDownCount++;
    $("#mouseCount").html(mouseDownCount);
  }, 100);
  return false;
}

function endMouseCount() {
  clearInterval(mdcTimer);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="addButton">Down</button>
<div id="mouseCount"></div>

希望这可以帮助！:)