1

Necesito de su ayuda,

tengo un arreglo que recorro con un foreach y dentro de cada interacción hago una petición ajax y hace un proceso en el backend... Sin embargo necesito que las peticiones dentro del foreach se mande siempre y cuando la petición anterior haya respondido o finalizado:

he programado la siguiente funcion sin embargo no funciona, recorre el array llamado resultado manda la peticion ajax, pero no espera a que termine para mandar la siguiente

el array resultado es un array en chunk que me lo manda el backend

0: [,…]
    0: {id: 2161, nombre: "Soy un Import", correo: "[email protected]", telefono: "1313123",…}
    1: {id: 2162, nombre: "otro", correo: "[email protected]", telefono: "12312321",…}
    2: {id: 2163, nombre: "ot22", correo: "[email protected]", telefono: "123123",…}
    3: {id: 2164, nombre: "Soy un Import", correo: "[email protected]", telefono: "123123123",…}
    4: {id: 2165, nombre: "otro", correo: "[email protected]", telefono: "12312321",…}
    5: {id: 2166, nombre: "ot22", correo: "[email protected]", telefono: "123123",…}
    6: {id: 2185, nombre: "nombre40", correo: "[email protected]", telefono: "123142",…}
1: {7: {id: 2186, nombre: "nombre41", correo: "[email protected]", telefono: "123143",…},…}
    8: {id: 2186, nombre: "nombre41", correo: "[email protected]", telefono: "123143",…}
    9: {id: 2187, nombre: "nombre42", correo: "[email protected]", telefono: "123144",…}
    10: {id: 2188, nombre: "nombre43", correo: "[email protected]", telefono: "123145",…}
    11: {id: 2189, nombre: "nombre44", correo: "[email protected]", telefono: "123146",…}

la funcion es :

resultado.forEach(function(item, index) {
    setTimeout(function() {
        $.ajax({                  
            type: "POST",
            url: "{{url('sendNotiEvento')}}",
            data: { item } 
        }).done(function (response) {
            $("#content_email_noti").append('<tr><td>'+response.nombre);
        });
    }, 2000);
});

como puedo hacer para que espere y al terminar la petición anterior mande la siguiente?

5
  • sería mejor una función recursiva que un foreach, la recursivdad la aplicas en el método .done del ajax Commented el 23 jun. 2021 a las 22:10
  • @L.Ronquillo tu dices que el done envie la peticion? Commented el 23 jun. 2021 a las 22:13
  • exacto, en el done podrías hacer la petición, y en el done de la nueva petición, hacer la siguiente. como no sabemos cuántos son y sería muy extenso poner tantas peticiones, es porque sugerí una función recursiva. code.tutsplus.com/es/tutorials/… Commented el 23 jun. 2021 a las 22:18
  • @L.Ronquillo edite mi pregunte y puse el array que es array en chunks he revisado tu respuesta pero no me funcion creo que por la estructura de mi array Commented el 23 jun. 2021 a las 22:47
  • me parece que es por eso, porque veo que por dentro tiene un índice propio, y no los objetos directos Commented el 23 jun. 2021 a las 22:49

5 respuestas 5

3

Como bien te sugiere @L.Ronquillo en comentarios, envía la siguiente petición hasta que la anterior haya finalizado. Si necesitas mantener sin modificar el arreglo resultado, debes crear uno nuevo.

En cada llamada a la función:

  1. Tomas el primer elemento con Array.shift(), eliminándolo del arreglo al mismo tiempo
  2. En caso de ser indefinido, quiere decir que ya no hay más peticiones para enviar
  3. Se hace la petición y, al terminar (done):
    • Actualizas la tabla
    • Ejecutas nuevamente la función (volviendo al paso 1)
function AjaxSend() {
    // Extraer el primer elemento del arreglo
    let item = send.shift();
    if(typeof item == 'undefined') {
        // No hay nada para enviar, salir de la función
        return;
    }
    $.ajax({                  
        type: "POST",
        url: "{{url('sendNotiEvento')}}",
        data: { item } 
    }).done(function (response) {
        // Actualizar contenedor
        $("#content_email_noti").append('<tr><td>'+response.nombre + '</td></tr>');
        // Continuar enviando
        AjaxSend();
    });
}

// Unir chunks en un solo arreglo
let send = [];
// Recorrer cada chunk para agregarlo
resultado.forEach(arr => send.push(...arr));
// Iniciar envíos
AjaxSend();

Importante: Si la cantidad de datos por cada elemento no es muy grande, puedes mejorar el rendimiento enviando todo en una sola petición. Lógicamente, deberías modificar el script del servidor para manejar todos los datos y devolver un arreglo con lo que se tenga que actualizar en la tabla, que también deberás recorrer en .done().

Solo para probar cómo se unen todos los "chunks" en un solo arreglo:

let resultado = [
  [
    {id: 2161, nombre: "Soy un Import", correo: "[email protected]", telefono: "1313123"},
    {id: 2162, nombre: "otro", correo: "[email protected]", telefono: "12312321"},
    {id: 2163, nombre: "ot22", correo: "[email protected]", telefono: "123123"},
    {id: 2164, nombre: "Soy un Import", correo: "[email protected]", telefono: "123123123"},
    {id: 2165, nombre: "otro", correo: "[email protected]", telefono: "12312321"},
    {id: 2166, nombre: "ot22", correo: "[email protected]", telefono: "123123"},
    {id: 2185, nombre: "nombre40", correo: "[email protected]", telefono: "123142"}
  ],
  [
    {id: 2186, nombre: "nombre41", correo: "[email protected]", telefono: "123143"},
    {id: 2186, nombre: "nombre41", correo: "[email protected]", telefono: "123143"},
    {id: 2187, nombre: "nombre42", correo: "[email protected]", telefono: "123144"},
    {id: 2188, nombre: "nombre43", correo: "[email protected]", telefono: "123145"},
    {id: 2189, nombre: "nombre44", correo: "[email protected]", telefono: "123146"}
  ]
];

// Unir chunks en un solo arreglo
let send = [];
// Recorrer cada chunk para agregarlo
resultado.forEach(arr => send.push(...arr));
console.log(send);

2
  • intente utilizar tu respuesta sin embargo no me funciono por el tipo de arreglo que tengo, edite mi pregunta.y coloque como es el array Commented el 23 jun. 2021 a las 22:58
  • 1
    @JoséVásquez, actualicé la respuesta y puse un fragmento de código para ver que todas las partes quedan en un solo arreglo.
    – Triby
    Commented el 23 jun. 2021 a las 23:54
1

Podrías, en vez de un foreach, utilizar una función recursiva. en sí, ¿qué es una función recursiva? Es una función que se llama a sí mismo, por ejemplo:

function ImprimeMenorCinco(numero){
   if(numero<=5){
      console.log(numero);
      ImprimeMenorCinco(numero+1); //aquí llama a la misma función
   }
}

Si a ese código yo lo ejecutase así: ImprimeMenorCinco(0), haría un console.log() de 0, 1, 2, 3, 4 y 5. Podemos usar un método similar para tu problema, sería algo así:

No tengo tu colección de datos, pero supongamos que tengo estos datos, y así los voy a mandar:

let resultado = ["primer dato", "otro dato"];

con esto, creamos una función recursiva que corra los elementos del array:

function ajaxRecursivo(array, indice) {
    if (typeof array[indice] != 'undefined') {
        $.ajax({
            type: "POST",
            url: "{{url('sendNotiEvento')}}",
            data: { array[indice] }
        }).done(function (response) {
            $("#content_email_noti").append('<tr><td>' + response.nombre);
            ajaxRecursivo(array, indice + 1);
        });
    } else {
        return;
    }
}

y finalmente llamamos al método para que empiece:

ajaxRecursivo(resultado, 0);

Espero mi respuesta te sirva, ¡Saludos! :D

1

Tal como dicen los comentarios, lo mejor es mandar a llamar el ajax hasta que termine la petición, si tienes dudas de como hacer esto (función recursiva), sería de la siguiente forma:

var index = 0; // declaramos tu primer elemento a iterar con el index 0

//Quitaremos el timeOut ya que no sabemos realmente cuanto durará tu petición AJAX en ejecutarse.

//Declaramos la funcion recursiva que vas a usar
function Peticion_Ajax(i){ //de parámetro solo necesitamos el index a usar
$.ajax({                  
            type: "POST",
            url: "{{url('sendNotiEvento')}}",
            data: { resultado[i]}  //sustituimos tu item por el que está siendo usado en el index
        }).done(function (response) {
            $("#content_email_noti").append('<tr><td>'+response.nombre);
            index++; //sumamos nuestro index para iterar el siguiente elemento
            //preguntamos si aun podemos iterar un siguiente elemento
            if(index < resultado.length) Peticion_Ajax(index); //volvemos a iterar
        });
}

//Ejecutamos la funcion ajax recursiva
Peticion_Ajax(index);



De esta manera la función se volverá a llamar a si misma y mandará el siguiente elemento de tu array hasta que termine con la anterior.

2
  • gracias por tu respuesta pero ni array tiene doble indice, coloque el array que estoy utilizando Commented el 23 jun. 2021 a las 23:16
  • @JoséVásquez ah vale vale, no había entendido tu array, pero espero que la lógica de la recursividad te ayudara en algo, saludos! :)
    – Jadeblue11
    Commented el 24 jun. 2021 a las 13:48
1

Corrección

Dado que he tenido una gran confusión (he usado estas funciones muy pocas veces), no lo he explicado bien, y lo único que he hecho es agravar el asunto. Voy a omitir lo innecesario y me voy a enfocar solo en la respuesta sin mas.

Empiezo de nuevo...

Detener un bucle foreach no es posible, no puedes recurrir al break tradicional, sin embargo, hay otra opción: some.

La función some sirve para comprobar si los elementos de un array cumplen una condición, si dicha condición devuelve true, el 'bucle' se detiene.

Podemos aprovecharnos de esto de la siguiente forma:

[0,1,2,3,4,5,6,7,8,9].some((n)=>{
  if (n == 5) {
    console.log("Deteniendo el bucle en",n);
    return true;
  } else console.log(n);
})

Observa como al llegar al número 5, estoy devolviendo true, automáticamente la función deja de recorrer el array.

No sé cómo puede comportarse respecto a otros casos, he usado some 3 veces contadas y en mi caso han funcionado de maravilla, pero su funcionamiento no es algo que tenga muy asimilado.

0
1

El forEach es siempre síncrono, paradójicamente eso hace que no pueda esperar promesas o cosas asíncronas ( tanto $.ajax como fetch implementan la interface de promesas ), de manera de ejecutarlas sincronicamente.

Para esta situación esta hecho el Promise.all y el for await of el primero resuelve no necesariamente en orden, for await of resuelve en orden, aqui el ejemplo:

const emp = [1, 2, 3];


(async function() {

    for await (let r of emp.map(e => fetch('https://hub.dummyapis.com/employee?noofRecords=1&idStarts=' + e)
      .then(response => response.json()
    ))) {

    console.log(r[0].firstName, " es la ", r[0].id);


  }

})();

La sintáxis es un poco confusa, pero la idea es iterar promesas por ejemplo, [ promesa1, promesa2, promesa3 ] o [$.ajax.., $.ajax.., $.ajax..].

Tu Respuesta

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

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