Question

我想要做的就是将一个显示在一个框中的数字增加1，并且只要鼠标停止，它就会每100毫秒执行一次。无论鼠标按下多长时间，该函数都会执行，但不会超过一次。每次在这个元素上有一个mousedown事件时，它只会将变量增加1，我可以在框中看到，但我想看到只要鼠标停留，数字就会继续快速增加。是否有任何代码可以阻止此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。案例一致性很重要。
您错过了#中的$("mouseCount") ID引用（应该是$("#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>

希望这有帮助！：）

Answer 2

我想你可能想要这个：

var mouseDownCount = 0;
var mdcTimer;

$("#addButton").mousedown(startMouseCount);
$("#addButton").mouseup(stopMouseCount);

function startMouseCount() {
    mdcTimer = window.setTimeout(function () {
        mouseDownCount++;
        $("#mouseCount").html(mouseDownCount);
        startMouseCount();
    }, 100);
}
function stopMouseCount() {
    clearTimeout(mdcTimer);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<button id="addButton">button</button>
<h2 id="mouseCount"></h2>

SetTimeout仅在mousedown上执行一次

2 个答案: