Tengo una página con muchas casillas de verificación, algo así como:
<input type="checkbox" value="1"> <input type="checkbox" value="2"> <input type="checkbox" value="3"> <input type="checkbox" value="4"> <input type="checkbox" value="5"> <input type="checkbox" value="6"> <input type="checkbox" value="7">Además, hay dos números importantes:
<h2 id="total-1">100</h2> <h2 id="total-2">200</h2>Después de que el usuario haga clic en la casilla de verificación, tengo que enviar una solicitud ajax al servidor con el valor de la casilla de verificación. El servidor hace algo de lógica y envía una respuesta con nuevos números "total-1", "total-2". Tengo que cambiar el color de fondo de la casilla de verificación depende de estos números y cambiar los números también.
Aquí está el problema: puede haber unas 20 casillas de verificación por página y si el usuario hace clic demasiado rápido, tengo un problema con los valores correctos debido a las llamadas ajax asíncronas.
Por ejemplo, si el usuario desmarca todas las casillas de verificación, los números deben ser "0". Hice clic rápido y recibí este comportamiento:
Total-1 Total-2 100 100 -> If all checkboxes are checked - numbers are same 72 30 -> Some logic, not matter what exactly 50 0 -> all checkboxes unchecked, but number is wrong.Si vuelvo a cargar la página, puedo ver que una de las casillas de verificación aún está marcada... Como se ve, el problema con las llamadas asíncronas. Necesito ayuda para comprender cómo garantizar que ajax envíe las llamadas en el orden correcto. Ahora, acabo de configurar la opción "asincrónica" en "falso", pero se retrasa después de hacer clic en la entrada
Mi idea es contar todas las solicitudes, guardarlas en una matriz global y verificar si esta respuesta es la siguiente en orden.
Puede implementar una cola para que se implemente 1 solicitud a la vez,
myQueue.pushRequest(function() { return $.ajax({ ... }) }); $(function () { var myQueue = { queueReq: [], pushRequest: function (request) { this.queueReq.push(request); if (this.queueReq.length === 1) { this.executeIncrement(); } }, clearQueue: function () { this.queueReq = []; }, executeIncrement: function () { var queueReq = this.queueReq; queueReq[0]().then(function (data) { queueReq.shift(); if (queueReq.length) { myQueue.executeIncrement(); } }); } };