實施並按住按鈕

Question

感謝您之前（由主持人刪除）的解釋和簡單的實現，但對我而言不起作用。 'holdit'函數可以工作，但是它不是很穩定，可能是因為'holdit'函數中也有一個'onmouseup'。即使我在HTML按鈕上禁用了onmouseup，它也不是很穩定。 也許最好使用addEventListener- onmousedown-interval函數，但是我也不知道如何以最簡單的方式實現它。 這是完整的功能，它顯示一個按下的按鈕，並將timeSeconds var加1。 為了安全起見， 數量在限制范圍內。 請幫忙。

     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

簡單實施：

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

沒有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

holdit函數采用四個變量。 第一個：btn，是按鈕的ID。 這用於確定每當單擊鼠標時執行的操作。

第二個變量是對函數的引用。 它稱為回調函數，因為您將在每次調用holdit時傳遞一個將被Caaalleed的函數。

最后兩個變量僅確定延遲重復執行的時間和時間，以及每次重復執行將加速多少時間。

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

Repeat是一個遞歸函數，將在“開始”毫秒后調用，並在每次迭代后更頻繁地重復。