javascript - 需要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

只需将下面的 toggleOn 放在按钮的 OnMouseDown 中，将 toggleOff 放在按钮的 OnMouseUp 中。

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

我刚刚发布了一个 jQuery 插件，在这个repo上查看这个演示。

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

Answer 5

@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 6

我升级了 neouser99 解决方案，因为我遇到了一些问题^^

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

    let repeat = () => {
        action();
        t = setTimeout(repeat, startValue);
        (startValue > limit) ? startValue /= speedup: 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 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;" />