How to fire an event after n seconds of maintained click? - jQuery/Javascript

Question

I am sure I am not the first looking for this, but I did not find any solution to my problem..

I am looking for a way to fire an event after and only after a 3 seconds maintained click. I tried with javascript setInterval() function with mouseup/mousedown Jquery events but it did't work.

Someone has an idea ?

I have a div, I keep the mouse button down for 3 seconds, and something will be fired. 3 seconds timer must be reinitialized every time.

Answer 1

Call setTimeout() to perform your action after 3000 milliseconds, storing the identifier from setTimeout() into a variable scoped above the function. On the element's mouseup(), clear the timeout if it exists via clearTimeout().

var divMouseDown;
$('#div-id').mousedown(function() {
  divMouseDown = setTimeout(function() {
     // Do timeout action...
  }, 3000);
});
$('#div-id').mouseup(function() {
  if (divMouseDown) {
    clearTimeout(divMouseDown);
  }
});