如何在JQuery中循环Ajax请求何时 - 然后声明？

Question

我试图从API异步加载一堆数据,当加载所有数据时,我想触发一个所有数据都被加载的事件.我遇到的问题是我使用的API将响应对象的数量限制为五个.我可能需要检索30-40个响应对象.

所以我想要做的是创建一个when-then语句循环通过数据项并请求每五个项目,然后当所有项目都加载时我想发起一个加载的事件.我遇到的问题是when-then语句在ajax请求成功之前完成.

我试过的代码.

 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);
    });

loadJSONToData函数基本上只是Async $ .ajax的包装函数.

所以是的,事件是在实际加载数据之前触发的.也是出于某些原因,如果我尝试在当时将循环放入(通过语法错误声明它？

有没有人对如何制作一堆Ajax请求有任何建议,并等到它们全部在触发事件之前都被竞争？或者去解决我目前的问题？

在此先感谢您的帮助.

Answer 1

你可以做你想要的事情.但是,您发送请求的服务器可能有理由限制它们执行.作为一名从事Web开发并且亲眼目睹了DDOS,抓取和其他滥用API的人的第一手资料,我建议遵守他们的限制.

话虽如此,这就是你如何做到的.

$ .ajax实际上返回一个延迟对象,因此您可以利用它来获得优势.$ .when也可以接受任意数量的延迟对象.结合这两个事实可以解决您的问题.

var deferreds = [];
$.each(groupedStats, function(index, stat){
    deferreds.push(
        // No success handler - don't want to trigger the deferred object
        $.ajax({
            url: '/some/url',
            data: {stat: stat},
            type: 'POST'
        })
    );
});
// Can't pass a literal array, so use apply.
$.when.apply($, deferreds).then(function(){
    // Do your success stuff
}).fail(function(){
    // Probably want to catch failure
}).always(function(){
    // Or use always if you want to do the same thing
    // whether the call succeeds or fails
});

请注意,这不是竞争条件.虽然$ .ajax是异步的,但$ .each不是,所以你的延迟列表将是你到达$ .when和$ .then/$之前的总列表.wone/$.只有在它们全部完成后才会触发.

编辑:我忘了将分裂加5s,但这说明了一般的想法.你可以从这里弄清楚如何将它应用到你的问题中.顺便说一下,您可以使用array.splice(0,5)从数组中获取接下来的5个结果..splice使用安全; 如果元素总数小于5,则只占用所有剩余元素.