Pergunta

Eu gostaria de um curto período de menor possível javascript rotina que, quando um mousedown ocorre em um botão, ele responde primeiro apenas como um clique do mouse e, em seguida, se o usuário mantém o botão pressionado, ele responde como se o usuário estivesse continuamente enviando cliques e depois de um tempo, com o botão pressionado age como se o usuário estivesse acelerando seus cliques...basicamente, pense nisso como um keypress repita com a aceleração no tempo.
i.e.usuário mantém pressionado o botão do mouse (x=função de chamada) - x___x___x___x__x__x_x_x_x_xxxxxxx

Foi útil?

Solução

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 */

Outras dicas

Quando o botão é premido, ligue para window.setTimeout com o tempo previsto e a função x, e definir o temporizador novamente no final do x mas desta vez, com um intervalo menor.

Claro que o tempo limite de utilização window.clearTimeout assim que soltar o botão do mouse.

Basta colocar o abaixo toggleOn no OnMouseDown e toggleOff no OnMouseUp do botão.

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{

}

algo como o psuedo código abaixo podem funcionar..

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

Eu acabei de lançar um plugin para jQuery, confira essa demonstração neste repo.

$('button').clickAndHold(function (e, n) {
    console.log("Call me baby ", n);
});
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top