需要用於按住按鈕的 javascript 代碼

Question

我想要一個盡可能短的 javascript 例程，當在按鈕上發生鼠標按下時，它首先像鼠標單擊一樣做出響應，然后如果用戶保持按下按鈕，它的響應就像用戶連續發送鼠標點擊一樣，一段時間后按下按鈕就像用戶在加速他們的鼠標點擊......基本上把它想象成隨着時間的加速而重復按鍵。
即用戶按住鼠標按鈕（x=調用函數） - 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

當按下按鈕，撥打window.setTimeout與你預期的時間和功能的x ，並在結束時再次設置定時器x ，但這次用較小的區間。

在釋放鼠標按鈕時使用window.clearTimeout清除超時。

Answer 3

只需在OnMouseDown中放置以下toggleOn，並在按鈕的OnMouseUp中放置toggleOff。

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：感謝這種有趣的方法！ 它有一些小問題： - 開始值沒有重置，所以在第二次使用時它開始太快了。 - 起始值被無限分割，所以在很短的時間后變得非常小。 - 參數沒有傳遞給被調用的方法。 （現在限制為 6 個參數，通常足以通過 '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

我升級了 neouser99 解決方案，因為我遇到了一些問題^^

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

我剛剛發布了一個jQuery插件，請在此repo上查看此演示 。

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

Answer 7

像下面的偽代碼可能會工作..

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;" />