Button function if the button is pressed for 10 seconds?

Question

I'm trying to find a way to execute a button function only if the user pressed/clicked on the button for 10 seconds.

the normal button function is:

$( "#target" ).click(function() {
alert( "Handler for .click() called." );
});

so is there any way to count the seconds from the moment the user pressed on the button and KEPT pressing, (a continuous pressing without clicking not tapping), and when the seconds hits 10, the function will execute?

http://stackoverflow.com/a/4080508/3130094 – Jamie Dunstan Dec 15 '14 at 15:02 — Jamie Dunstan, Dec 15 '14 at 15:02

adeneo · Accepted Answer · 2020-06-17T18:11:18.747

6

You'll need timers, set one when the mouse is held down, clear it when the mouse is released.

$( "#target" ).on({
    mousedown: function() {
        $(this).data('timer', setTimeout(function() {
              foo();
        }, 10000));
    },
    mouseup: function() {
        clearTimeout( $(this).data('timer') );
    }
});

FIDDLE

edited Jun 17 '20 at 18:11

answered Dec 15 '14 at 15:02

adeneo

312,895
29
395
388

so the foo(); is my function and this will execute if I keep pressing the button for 3 seconds? – user3806613 Dec 15 '14 at 15:06
@user3806613 - exactly ! – adeneo Dec 15 '14 at 15:07
nice one... i will accept this as the answer in 5 minutes... – user3806613 Dec 15 '14 at 15:08
60.000 is 60 seconds, because 1000 is 1 second. See https://www.w3schools.com/jsref/met_win_settimeout.asp. – koppor Jun 03 '20 at 19:30

score 0 · Answer 2 · answered Dec 15 '14 at 15:07

You have to use mousedown and mouse up instead of click event ,

var timeOut = 0;
$("#target").mousedown(function () {
    clearTimeout(timeOut);
    timeOut = setTimeout(function () {
        console.log("Handler for .click() called.");
    }, 10000);
});
$(document).mouseup(function () {
    clearTimeout(timeOut);
    console.log("stop");
})

DEMO

score 0 · Answer 3 · answered Dec 15 '14 at 15:09

0

The jQuery LongPress plugin will handle this for you.

https://github.com/vaidik/jquery-longpress

You can set the delay parameter before your function executes.

answered Dec 15 '14 at 15:09

Len_D

1,422
1
12
21

score 0 · Answer 4 · answered Dec 15 '14 at 15:12

JS

var threshold = 10000, timeOne, timeTwo;
$('#t10').mousedown(function(){
    timeOne = new Date();
}).mouseup(function(){
    timeTwo = new Date();
    if(timeTwo - timeOne >= threshold){
        alert('Do what you want');
        timeOne = 0;
    }else{
        console.log('Released early');
    }
});

HTMl

<button  id="t10">XX</button>

Fiddle http://jsfiddle.net/5z94y2z5/

score 0 · Answer 5 · answered Dec 15 '14 at 15:13

you needs to use mousedown and mouseup events

http://api.jquery.com/mousedown/ http://api.jquery.com/mouseup/

var pressedtensecondos = false;
var timer = null;

$( "#target" ).mousedown(function() {
  timer = setTimeout(function() { pressedtensecondos = true; }, 10000);
});

$( "#target" ).mouseup(function() {
  clearTimeout(timer);
  
  if(pressedtensecondos)
    alert('ten seconds');

  pressedtensecondos = false;
});

Button function if the button is pressed for 10 seconds?

5 Answers5