Need javascript code for button press and hold

Question

I'd like a short smallest possible javascript routine that when a mousedown occurs on a button it first responds just like a mouseclick and then if the user keeps the button pressed it responds as if the user was continously sending mouseclicks and after a while with the button held down acts as if the user was accelerating their mouseclicks...basically think of it like a keypress repeat with acceleration in time.
ie user holds down mouse button (x=call function) - x___x___x___x__x__x_x_x_x_xxxxxxx

Answer 1

function holdit(btn, action, start, speedup) {
    var t;

    var repeat = function () {
        action();
        t = setTimeout(repeat, start);
        start = start / speedup;
    }

    btn.mousedown = function() {
        repeat();
    }

    btn.mouseup = function () {
        clearTimeout(t);
    }
};

/* to use */
holdit(btn, function () { }, 1000, 2); /* x..1000ms..x..500ms..x..250ms..x */

Answer 2

When the button is pressed, call window.setTimeout with your intended time and the function x , and set the timer again at the end of x but this time with a smaller interval.

Clear the timeout using window.clearTimeout upon release of the mouse button.

Answer 3

Just put the below toggleOn in the OnMouseDown and toggleOff in the OnMouseUp of the button.

var tid = 0;
var speed = 100;

function toggleOn(){
    if(tid==0){
        tid=setInterval('ThingToDo()',speed);
    }
}
function toggleOff(){
    if(tid!=0){
        clearInterval(tid);
        tid=0;
    }
}
function ThingToDo{

}

Answer 4

@glenuular: Thanks for this interesting approach! There were some small problems with it: - The start value was not reset, so on the second use it started too fast. - The start value was divided without limit, so it became very small after short time. - Arguments were not passed to the called method. (Now limited to 6 args, usually sufficient to pass 'ev').

    function holdit( btn, method, start, speedup ) {
    var t, keep = start;
    var repeat = function () {
        var args = Array.prototype.slice.call( arguments );
        method.apply( this, args );
        t = setTimeout( repeat, start, args[0], args[1], args[2], args[3], args[4], args[5] );
        if ( start > keep / 20 ) start = start / speedup;
    }
    btn.onmousedown = btn.mousedown = repeat;
    //
    btn.onmouseout = btn.mouseout = btn.onmouseup = btn.mouseup = function () {
        clearTimeout( t );
        start = keep;
    }
};

Answer 5

I upgraded neouser99 solution because i ran into some problems with it ^^

let holdIt = (btn, action, start, speedup, limit) => {
    let t;
    let startValue = start;

    let repeat = () => {
        action();
        t = setTimeout(repeat, startValue);
        if (startValue > limit) {
            startValue /= speedup;
        } else {
            startValue = limit;
        }
    }

    btn.onmousedown = () => {
        repeat();
    }

    const stopActionEvents = ['mouseup', 'mouseout'];

    stopActionEvents.forEach(event => {
        btn.addEventListener(event, () => {
            clearTimeout(t);
            startValue = start;
        })
    });

};

holdIt(actionButton, functionToDo, 500, 2, 5);

Answer 6

I just release a jQuery plugin, check this demo on this repo .

$('button').clickAndHold(function (e, n) {
    console.log("Call me baby ", n);
});

Answer 7

something like the psuedo code below might work..

var isClicked = false;
var clickCounter = 100;
function fnTrackClick(){
   if(isClicked){
      clickCounter--;
      setTimeout(clickCounter * 100, fnTrackClick);
   }
}

<input type="button" value="blah" onmousedown="isClicked=true;" onmouseover="fnTrackClick();" onmouseup="isClicked = false;" />