SetTimeout 仅在 mousedown 时执行一次 [重复]答案

【问题标题】：SetTimeout only executes once on mousedown [duplicate]SetTimeout 仅在 mousedown 时执行一次 [重复]
【发布时间】：2018-01-30 01:47:03
【问题描述】：

我要做的就是将显示在框中的数字加 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;
}

【问题讨论】：

setTimeout 本质上不会重复。 setInterval 确实
对这项工作使用 setInterval
或者递归调用同一个函数。是的，你是对的，这就是我所缺少的。有人可以将其作为答案，以便我可以将其标记为已接受吗？我刚刚添加了一条线，它会调用自己并且可以正常工作。我有其他功能在其他地方停止它，所以它不需要自行停止。
或者只是删除您的问题，因为它是重复的。

标签： javascript jquery

【解决方案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>

希望这会有所帮助！ :)

【讨论】：

我不是投反对票的人...但是 «...只要鼠标按下，它就每 100 毫秒执行一次。»
我已经更新了我的代码以创建第二个函数，以便在不再按住按钮时停止计时器 =]

【解决方案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 而不是 setInterval，因为它更精确。
setInterval() 在这种情况下是更好的解决方案。