需要用于按住按钮的 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;" />