Java Script: Buffer de Llamadas



Supongamos que hemos implementado una funcionalidad donde queremos realizar una acción cuando el usuario presione un botón y si el usuario presiona repetidas veces dicho botón, solo queremos considerar el último click y descartar las previas!!

Como lo hacemos??

Bueno la solución la podemos encontrar en lo que yo llamo "Buffer de llamadas" y consiste en programar la acción ayudándonos de la función setTimeout y cancelandola con un clearTimeout en caso de haber una nueva.

Aqui un sencillo ejemplo:

Este ejemplo tiene dos botones que incrementan y decrementan la variable count y que solo muestra un alert con el valor después de 1 segundo de haber dejado de presionar el o los botones, dicho de otra forma, puedo hacer n clicks con menos de un segundo de entre ellos y solo visualizaré un alert!!!

Mira el código mas abajo o pruebalo aqui


<!DOCTYPE html>
<html>
<body>

<p>Muestra en un alert el valor de count, 1 segundo después que se haya dejado de presionar los botones incremento o decremento </p>
<p id="count">count:0</p>

<button onclick="add()">+</button>
<button onclick="sub()">-</button>

<script>
var count = 0; var lastCall = null; function buffer() { document.getElementById("count").innerHTML = "count:"+count; // cancel last Call to showCounter clearTimeout(lastCall); // wait 1 sec then call to showCounter lastCall = setTimeout(showCounter, 1000); } function showCounter() { alert("count:" + count); } function add() { count++; buffer(); } function sub() { count--; buffer(); } </script>

</body>
</html>



Comentarios

Entradas populares