Tengo ciertos usuarios que tienden a hacer click demasiadas veces haciendo que el programa haga muchas solicitudes aun servidor y que este de errores 422 y 500. Ya me dijo el administrador del servidor que no puede subir el rate limiting, por lo que he buscado como limitar las ejecuciones de una funcion en un determinado tiempo.
-
2Porque no simplemente deshabilitas el boton al primer click que se le de?– Santiago RoldanCommented el 15 dic. 2017 a las 21:27
-
Puedes intentar desactivar el botón cuando se de click hasta recibir una respuesta, pero ¿usas ajax, php, que has hecho?– LegnaCommented el 15 dic. 2017 a las 21:27
-
La solución sería bloquear el botón que ejecuta la llamada mientras el servidor responde o por un intervalo de tiempo– Jonathan chCommented el 15 dic. 2017 a las 21:27
-
Lo hago con Angular– Antonio Xocoy RosalesCommented el 15 dic. 2017 a las 21:31
-
ejecutalo con ajax, así no podrán recargar la pagina tantas veces– laura castilloCommented el 15 dic. 2017 a las 21:31
3 respuestas
Bueno es importante mantener al usuario al tanto de lo que esta sucediendo para eso puedes agregarle un texto informativo como Enviando..
o alguna animación que signifique espera o que se esta ejecutando la acción y des habilitar el botón para que no pueda volver a enviar la misma data y consultar sin necesidad el servidor.
Cuando obtenemos la respuesta del servidor volvemos a habilitar el botón al usuario y con el su texto correspondiente a la acción.
NOTA: Para el ejemplo consulto unos datos de prueba y le agregue un
setTimeout()
para simular retardo en el retorno.
Ejemplo funcional
$("#btn").click(function(){
var _this = $(this)
$(this).text("Enviando..").attr("disabled",true)
$.ajax({
url:'https://jsonplaceholder.typicode.com/posts/1',
method: 'GET'
}).then(function(data) {
setTimeout(function () {
console.log(data);
_this.text("Consultar al servido").attr("disabled",false)
}, 2000);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn" type="button" name="button">Consultar al servidor</button>
Cuando un usuario pulsa un botón y no ve que ocurra nada se impacienta y se extraña. En estos casos lo mejor es hacerle ver que debe esperar, que el programa no se ha "colgado" y que simplemente está esperando una respuesta. Por tanto, la solución que suelo emplear consiste en:
1.- Evitar que el usuario intente repetir la acción. Hay varias opciones:
- Deshabilitar el botón o ignorar las pulsaciones mientras se obtiene una respuesta. Si la respuesta suele llegar en menos de un par de segundos es una buena opción porque antes de que el usuario se de cuenta de qué pasa ya habremos mostrado una nueva pantalla.
- Ocultar el botón porque ya ha cumplido su función. Esta solución se debe combinar con algo más de información para evitar confundir al usuario, lo que nos lleva a...
2.- Informar al usuario de lo que está ocurriendo:
- Mostrar alguna animación (el clásico reloj de arena, una barra de progreso...) junto con un mensaje ayuda a no confundir al usuario.
- Mostrar un modal que impida pulsar lo que hay detrás. El modal puede informar brevemente de lo que está sucediendo. Mientras el usuario lee, ganamos tiempo y hacemos la espera algo más amena.
Si trabajas con Angular es muy sencillo crear un componente reusable que haga alguna de estas funciones.
$('#btn').on('click',function () {
$('#modal').toggleClass('hidden');
setTimeout(function () {
$('#modal').toggleClass('hidden');
},5000);
});
#modal {
position:fixed;
top:0;
left:0;
bottom: 0;
right:0;
background-color: black;
opacity: 0.4;
z-index: 50;
}
#modal.hidden {
display:none;
}
#modal div {
position: absolute;
top: 40px;
left: 40px;
z-index: 51;
opacity: 1;
background-color: blue;
color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ejemplo">
<span> Texto por aquí de adorno </span>
<button id="btn">Pulsa</button>
</div>
<div id="modal" class="hidden">
<div><span>Espere 5 segundos, por favor</span></div>
</div>
Al final, decidi hace un validador de la ultima ejecucion.
Cree una variable con el tiempo en milisegundos en el inicio de la pantalla
lastExecute = Date.now() - 300;
y un metodo que validara hace cuanto tiempo hizo click.
private validateLastExecute(): boolean {
return Date.now() - this.lastExecute >= 300;
}
luego ejecutar esa funcion cuando se llamara el metodo que se ejecuta en cada click.
public onClickButton() {
if (this.validateLastExecute()) {
bla bla bla...
}
}