Implement press and hold on a button

Question

Thank you for the previous (deleted by moderator) explanation and the simple implementation but it does not work out for me. The 'holdit' function works but it is not is not steady probably because there is an 'onmouseup' in the 'holdit' function too, Even if I disable the onmouseup at the HTML button it's not very steady. Maybe it's better to use an addEventListener- onmousedown-interval function but again I don't know how to implement it in the simplest possible way. Here's the complete function that shows a pressed button and increases the timeSeconds var by one. For safety the var. number is within a limit. Please help.

     HTML:
    <img id="but4" class="button" src= "//:0" onmousedown="timesecPlus();"onmouseup="timesecPlsUp();"/>

     JAVASCRIPT:
    function timesecPlus() {
    var pmknop = document.getElementById('but5');
    pmknop.src = secminBtndwn; //inline Base64 data: button image down (pressed) 

    timeSeconds = ((timeSeconds>wedstrijdperiode.seconden-6)?(timeSeconds):(++timeSeconds)); //You can ++ chase-back the timeseconds until 5 sec's from   period start-time
    displayTime( timeSeconds ); 
    };

    function timesecPlsUp() {
    var pmknop = document.getElementById('but5'); 
    pmknop.src = secminBtn; //inline Base64 data: button image up (normal)
    };

   // Things I tried:
   //holdit(pmknop, function () { ++timeSeconds ; displayTime( timeSeconds );}, 2000, 2);
   //pmknop = pmknop.addEventListener('mousedown', function() { interval = setInterval(timesecPlus (), 2000); });


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

    var repeat = function () {
    action();
    t = setTimeout(repeat, start);
    start = start / speedup;
    }
    btn.onmousedown = function() {
    repeat();
    }
    btn.onmouseup = function () {
    clearTimeout(t);
    }
     }; 

Answer 1

Simple implementation:

var btn = document.getElementsByClassName('button')[0];
holdit(btn, function () { timeSeconds++ ; displayTime( timeSeconds );}, 1000, 2);

Implementation without holdit:

var btn = document.getElementsByClassName('button')[0];
var couterFunc, couter=0;
btn.addEventListener('mousedown',function(){couterFunc = setInterval(update,1000); update()})
btn.addEventListener('mouseup',function(){clearInterval(couterFunc)})

/* function that will fire when button press*/
function update(){console.log(++couter)};

Answer 2

The holdit function is taking four variables. The first: btn, is the button id. This is used to determine the action performed whenever the mouse is clicked.

The second variable is a reference to a function. Its called a callback function, since you will be passing a function that will be Caaalleed whenever you call holdit.

The last two variables simply determine when and how long to delay the execution of the repetition and and by how much each repetition will speed up by.

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

Repeat is a recursive function that will be called after 'start' number of milliseconds and be repeated more frequently after each iteration.