SetTimeout only executes once on mousedown

Question

All I am trying to do is to increment a number showing in a box by 1 and having it do that every 100 ms as long as mouse is down. The function executes, but never more than once no matter how long the mouse is held down. It only increments the variable by 1 each time there is a mousedown event on this element and I can see that in the box whereas I wanted to see the number keep increasing rapidly as long as the mouse stays down. Is there any code for the mouseup event that would stop this mousedown event from continuing to execute the function in setTimeout or is there a rule of some sort I am missing? Weird.

var mouseDownCount = 0;

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

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

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

  return false;
}

Or call the same function recursively. Yes, you are right, that's what I was missing. Can somebody put that as an answer so I can mark it as accepted? I just added a line where it calls itself and it works. I have other functions stopping it elsewhere so it doesn't need to stop itself. — Bobh, Aug 21 '17 at 22:35

Obsidian Age · Answer 1 · 2017-08-21T22:36:51.733

You have a number of problems with your code:

You are referencing mousedownCount multiple times, when your variable is mouseDownCount. Case consistency is important.
You missed the # ID reference in $("mouseCount") (it should be $("#mouseCount")).

In addition to this, you're looking for setInterval() rather than setTimeOut(), as setInterval() will trigger multiple times, whereas setTimeOut() will trigger only once.

Note that you'll probably also want to stop the timer from counting indefinitely, which can be done on mouseUp:

Here's a working example:

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>

Hope this helps! :)

I'm not the downvoter... But *«...having it do that every 100 ms as long as mouse is down.»* — Louys Patrice Bessette, Aug 21 '17 at 22:35
I've updated my code to create a second function to stop the timer once the button is no longer held down =] — Obsidian Age, Aug 21 '17 at 22:37

score -1 · Accepted Answer · answered Aug 21 '17 at 23:00

-1

I guess you may want this:

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>

answered Aug 21 '17 at 23:00

May

14
2

Right, that is exactly what I did and it worked. I just had the function call itself recursively as there are other events going that will stop the timer. The variable error was actually a typo on my part because I didn't copy and paste it, I typed it, but you fixed that here so I'll mark this as the best answer and it only took one extra line of code for the recursive call. I prefer setTimeout over setInterval because it's more precise. – Bobh Aug 21 '17 at 23:21
setInterval() is a better solution in this case. – Picard May 11 '20 at 08:11

SetTimeout only executes once on mousedown

2 Answers2