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...
3 Respostas
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>
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.
-
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
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
});