2

Antes de nada Gracias.
Yo tengo un bucle donde quiero hacer varios POST a un php desde AJAX pero quiero que hasta que no termine el POST no se siga ejecutando el bucle.
Dejo código:
PD: Ese archivo php hace un insert a una base de datos SQL, me gustaría saber si es posible saber desde javaScript cuando termina de hacerse el insert y de paso no seguir ejecutando el for hasta que se ejecute cada insert. (cualqueira de las dos maneras me serviría

for (let i = 0; i < cantidad; i++) { 

                n = 0;
                n++;
                numeroCodeBar = parseInt(numeroCodeBar) + n;
                var resultado = cadenaNumerica + numeroCodeBar;
                resultado = resultado.toString().substring(resultado.length - cadenaNumerica.length);
                var f = new Date();
                var fechaActual = f.getDate() + "-" + (f.getMonth() + 1) + "-" + f.getFullYear();
                var codeBar = departamento.value + sociedad.value + tipoAF.value + anio.value.substring(2, 4) + resultado;
                var subcodigo = departamento.value + '-' + sociedad.value + '-' + tipoAF.value + '-' + anio.value.substring(2, 4) + '-' + resultado;
                var infoParaEnviar = {
                    departamento: departamento.value,
                    sociedad: sociedad.value,
                    tipoAF: tipoAF.value,
                    anio: anio.value,
                    fechaActual: fechaActual,
                    codeBar: codeBar,
                    subcodigo: subcodigo
                };

                    $.ajax({
                        type: "POST",
                        url: "php/insertar.php",
                        data: infoParaEnviar,
                        dataType: "text",
                        asycn: true,
                        success: function () {
                        }
                    });

            }

Si no me explico bien díganmelo eh intentaré editar la pregunta

4
  • En el código de arriba tienes asycn: true, eso quiere decir que va a lanzar todas las request independientemente de que la anterior haya finalizado. En programación asíncrona lo que hacemos tipicamente es lanzar la siguiente request en la función success de la request anterior, o con done(). Otra opción es no usar programación asíncrona.
    – derloopkat
    el 14 jun. 2018 a las 8:30
  • Muchas gracias, la puse a falso y sigue insertando datos de manera desordenada, no consecutivamente. Me gustaría que pusieras un ejemplo de como enviar los datos de manera no asíncrona. Gracias de nuevo el 14 jun. 2018 a las 8:38
  • 2
    Ajax síncrono es una mala idea: congelará la UI. Por otro lado no entiendo el uso de la variable n: en cada iteración se pone a 0 y acto seguido se pone a 1... algo no está bien, aparte de las llamadas ajax el 14 jun. 2018 a las 9:42
  • 2
    Intento aportar claridad: n no está declarada (¿se crea como global o estará declarada fuera del bucle?). Se inicializa en cada iteración (siempre vale 1) y se usa una sola vez. Todo esto hace que piense que el código está incompleto y por tanto la respuesta puede no ajustarse a lo que realmente necesita el 14 jun. 2018 a las 10:20

2 respuestas 2

2

A ver qué te parece esta aproximación:

  1. Creas un array con los datos que quieres meter:

    let datos=[]
    for (...) {
      ... // Lo que necesites para preparar los datos a enviar
      datos.push({
        departamento: departamento.value,
        sociedad: sociedad.value,
        tipoAF: tipoAF.value,
        anio: anio.value,
        fechaActual: fechaActual,
        codeBar: codeBar,
        subcodigo: subcodigo
      });
    }
    
  2. Y entonces haces que la llamada ajax, al ser respondida, se repita con el siguiente dato del array:

    function nextCall(d) {
      return $.ajax({
        type: "POST",
        url: "php/insertar.php",
        data: d,
        dataType: "text",
      });
    }
    
    let ajaxPromise=nextCall(datos.shift());
    
    while(datos.length) {
      ajaxPromise=ajaxPromise.then(nextCall(datos.shift()));
    }
    
0
1

En respuesta a lo que me pedías en el comentario, este es un ejemplo sencillo. Básicamente pones el Ajax adentro de una función y como en Javascript las funciones son objetos, la puedes pasar directamente como función success.

function LanzarAjax()
{
    $.ajax({
        url: "http://localhost/api/data",
        success: LanzarAjax
    });
}

Ahora bien, cuando el usuario da click en enviar, llamas a la función por primera vez:

$("#enviar").click(LanzarAjax);

El problema es que eso se ejecutaría para siempre. Entonces agregamos una variable para saber hasta cuando repetir. El código completo es:

<button id="enviar">Enviar</button>
<script>
    function LanzarAjax(repetir)
    {
        $.ajax({
            url: "https://reqres.in/api/users?page=2",
            success: function (response) {
                console.log(repetir);
                if (repetir > 0)
                {
                    repetir--;
                    LanzarAjax(repetir);
                }
            }
        });
    }
    $("#enviar").click(function () { LanzarAjax(4); });
</script>

En consola va imprimiendo 4, 3, 2, 1, 0. Parece que esta api Reqres no da problemas con CORS, entonces la puedes invocar tal cual está en el codigo de arriba. Es mas, puedes agregar console.log(response); para que salga en consola el json que va retornando.

1
  • ahora si entendí a lo que se refería, muchas gracias por la ayuda creo que funcionara, lo voy a probar. el 14 jun. 2018 a las 9:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.