Blog
Hoy en día es muy común tener que hacer una petición AJAX en Java Script es por eso que librearías como jQuery nos facilitan esta tarea.
Hacer una petición AJAX dentro del ciclo for en Java Script nos puede ocasionar un gran problema, esto se debe a que estas peticiones se ejecutan de forma asíncrona (concurrente), entonces puede pasar que el índice del for se cambie mientras una petición AJAX está en proceso. Por ejemplo si ejecutamos el siguiente código es muy probable que el índice sea el mismo en varias peticiones o el resultado quede desordenado:
Código Java Script
<!DOCTYPE html> <html> <head> <title>Ajax dentro del ciclo for en Java Script</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> </head> <body> <script> var ids = [1,2,3,4,5]; for(indice = 0; indice < ids.length; indice++){ // Es importante notar que estamos utilizando jQuery $.ajax({ url: "test.php", method: "POST", data: { parametro: ids[indice] } }).done(function(data) { console.log(data); }); } </script> </body> </html>
Código PHP del archivo test.php
<?php echo $_POST['parametro']; ?>
Si ejecutamos el código anterior varias veces vamos a ver que el resultado no siempre es el mismo.
Peticiones AJAX dentro del ciclo for en Java Script
Una de las opciones para solucionar este problema es la recursividad, si no están muy familiarizados con este tema los invito al leer el tutorial que explica que es la programación recursiva. Para este caso podemos crear una función que se llama a sí misma dentro de done con el parámetro del índice:
<!DOCTYPE html> <html> <head> <title>AJAX dentro del ciclo for en Java Script</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> </head> <body> <script> var ids = [1,2,3,4,5]; function enviar(indice){ // Es importante notar que estamos utilizando jQuery if(indice < ids.length){ $.ajax({ url: "test.php", method: "POST", data: { parametro: ids[indice] } }).done(function(data) { console.log(data); enviar(indice + 1); }); } } enviar(0); </script> </body> </html>
Con el script anterior nos aseguraremos que nuestro código se ejecute de la misma forma (estructural) siempre, donde cada petición AJAX se va a ejecutar una vez que termine la anterior.
Bueno hemos llegado al final de este tutorial, espero que les sea de gran utilidad. Ante cualquier problema no duden en dejar un comentario.
Te ganaste un lugar en mi corazón!!! lol! va excelente!!! Gracias, lo hice con una barra de carga para grabar registros.