Java Script

AJAX dentro del ciclo for en Java Script

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.

Compartilo en
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestEmail this to someone

AboutJosé Di Meglio

Apasionado de la tecnología y programación. Aportando información gratuita sobre el mundo de la informática.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *