Estoy tratando de cargar un montón de datos de una API Async y cuando todos los datos se cargan, quiero activar un evento en el que todos los datos están cargados. El problema que tengo es que la API que estoy usando limita el número de objetos de respuesta a cinco. Y potencialmente necesitaría recuperar 30-40 objetos de respuesta.

Entonces, lo que quiero hacer es crear una declaración de "cuándo", que haga un bucle a través de los elementos de datos y realice una solicitud por cada cinco elementos y luego, cuando todos los elementos se carguen, deseo activar un evento cargado. El problema que tengo es que la instrucción when-then se completa antes del éxito de la solicitud ajax.

en el código que he intentado.

 function loadsLotsOfStats(stats, dataType, eventName, dataName, callback) {
     var groupedStats = [];
     while (stats.length > 0) {
         groupedStats.push(stats.splice(0, 5).join('/'));
     }
    j$.when(
        groupedStats.forEach(function (d) {
            loadJSONToData(model.apiUrl.replace("{IDS}", d), "json", "", dataName, function (d) { /*console.log(d);*/ }, true)
        })
    ).then(function () {
        j$(eventSource).trigger('dataLoaded', eventName);
    });

La función loadJSONToData es básicamente una función de envoltorio para un Async $ .ajax.

así que sí, el evento se activa antes de que los datos se carguen realmente. También, por alguna razón, si trato de poner el bucle justo en el cuándo (¿declararlo a través de un error de sintaxis?

¿Alguien tiene algún consejo sobre cómo podría hacer un montón de solicitudes de Ajax y esperar hasta que todas se completen antes de desencadenar un evento? ¿O una salida para arreglar lo que tengo actualmente?

Gracias de antemano por la ayuda.