如何在JQueryWhen-Then语句中循环Ajax请求

How to loop through Ajax Requests inside a JQuery When - Then statment?

本文关键字:循环 Ajax 请求 语句 JQueryWhen-Then      更新时间:2023-09-26

我正在尝试从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.的包装函数

所以,是的,在数据被实际加载之前,事件就被触发了。同样出于某种原因,如果我试图将for循环放在when(通过语法错误声明它?

有人对我如何提出一堆Ajax请求并等到它们都被强制执行后再触发事件有什么建议吗?或者一个离开来修复我目前拥有的东西?

提前感谢您的帮助。

按照您的要求行事是可能的。然而,发送请求的服务器可能有其强制限制的原因。作为一个从事网络开发的人,我亲眼目睹了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/$.fail/$.之前,延迟列表将是总列表,始终只有在它们全部完成后才会触发。

编辑:我忘了添加5秒的拆分,但这说明了总体思路。你也许可以从这里找到如何将它应用于你的问题。顺便说一句,你可以使用array.splice(0.5)从数组中获得接下来的5个结果。拼接使用安全;如果元素的总数小于5,它将只占用所有剩余的元素。

您可以使用Async.js库。并尝试每个功能。