Run a function while holding button, stop when releasing

5

How to execute a function when the user hold a button and stop executing when the user releases the button. As in WhatsApp when you are going to record an audio ...

    
asked by anonymous 31.05.2017 / 16:25

3 answers

5

You can do this:

var intervalId = 0;

// Define o evento de clicar com o botão do mouse no #click
$('#click').on('mousedown', function() {
    intervalId = setInterval(hold, 500); // Define um intervalo que a função será chamanda em 0.5 segundos
});

// Define o evento de soltar ao documento
$(document).on('mouseup', release);

// Função que será chamada com delay de 0.5 segundos
function hold() {
    console.log('Pressionando...');
}

// Função que será chamada quando soltar o botão
function release() {
    if(intervalId != 0) {
        clearInterval(intervalId); // Limpa o intervalo registrado anteriormente
        intervalId = 0;
        
        console.log('Soltou!');
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><buttonid="click">Clique e segure</button>
    
31.05.2017 / 16:37
0

I believe the necessary actions are the following, it is necessary to implement the code of your recording, see if it helps you:

$(function() {

  $("button").mouseup(function() {
    $("#gravando").text('Não');
    // Sua lógica para parar a gravação
  }).mouseout(function() {
    $("#gravando").text('Não');
    // Sua lógica para parar a gravação
  }).mousedown(function() {
    $("#gravando").text('Sim');
    // Sua lógica para iniciar a gravação    
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><p>EstáGravando?</p><divid="gravando">Não</div>

<button>Gravar</button>

I believe that it meets your request.

    
31.05.2017 / 16:30
0

I got Bruno Rigolon's help, I just switched the 'mousedown' and 'mouseup' events to touchstart and touchend because I'm using the phonegap.

The code looks like this:

$('#btn_gravar').on('touchstart',function(){
    //Inicia o processo de gravação
});

 $('#btn_gravar').on('touchend',function(){
    //Para o processo de gravação
 });
    
31.05.2017 / 18:47