5

Como executar uma função quando o usuário segurar um botão e parar de executar quando o usuário soltar o botão. Como acontece no WhatsApp quando você vai gravar um áudio...

1
  • Mostre o código que vc já desenvolveu usando um botão para começar a gravar e um para parar para que possamos adaptá-lo a sua necessidade
    – user60252
    Commented 31/05/2017 às 15:52

3 Respostas 3

5

Você pode fazer assim:

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>


<button id="click">Clique e segure</button>

0

Acredito que as ações necessárias sejam a abaixo, falta é implementar o código de sua gravação, veja se lhe ajuda:

$(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>
<div id="gravando">Não</div>

<button>Gravar</button>

Acredito que atenda a sua solicitação.

4
  • Não funcionou, na verdade eu quero fazer exatamente oque o whatsApp faz para gravar os áudios, eu já consigo gravar os áudios porém usando um botão para começar a gravar e um para parar. Eu quero que grave enquanto estou segurando o botão e pare de gravar quando eu soltar o botão; Commented 31/05/2017 às 14:54
  • Alterei o código para corresponder melhor ao que precisa, veja se é isso mesmo. Commented 31/05/2017 às 15:08
  • É exatamente isso que estou tentando fazer, o problema é que estou utilizando o PhoneGap, e estes eventos : mouseup mouseout e mousedown, não funcionam. Commented 31/05/2017 às 16:20
  • Consegui: Apenas mudei o evento 'mousedown' por 'touchstart' e o 'mouseout' por 'touchend'.. Commented 31/05/2017 às 16:40
0

Consegui com a ajuda do Bruno Rigolon, Apenas troquei os eventos 'mousedown' e 'mouseup' por touchstart e touchend pois estou utilizando o phonegap.

O código fica dessa maneira:

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

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .