jQuery - 连接未知数量的 Ajax 请求的结果答案

【问题标题】：jQuery - Concatenating the results of an unknown number of Ajax requestsjQuery - 连接未知数量的 Ajax 请求的结果
【发布时间】：2012-02-05 03:37:35
【问题描述】：

这可能非常简单，也可能非常复杂，我目前不确定。

我正在编写一个基于 Cineworld API 制作电影时间表的小型网络应用程序。

我正在使用 AJAX 拉回数据，这很好，但我已经到了想要获取所有选定电影的所有时间然后继续操作它们的地步，但是将所有结果证明有点问题。

生成的 API 调用只能在单部电影上完成，所以我必须依次拉回每部电影的数据。

您可以在此处查看应用程序的当前状态，非常早的状态：http://www.lewishowles.co.uk/film/

主要内容在这个文件中：http://www.lewishowles.co.uk/film/js/lh.js

42 和 206 行是我的问题。 42 总是记录一个空数组，但如果我每次都将数组记录下来206，那很好。日志显然不会对我有太大帮助。看起来42 上的日志并未等待其上方函数中的所有代码完成。

如您所见，我尝试了一个全局数组，我尝试了返回值，但它似乎仍然过快地运行日志。

Deferred 似乎通常是这种情况，但每次都会有不同数量的 ajax 调用，并且您似乎需要知道使用 Deferred 的数量。

将 async 设置为 false 可以防止它们相互绊倒，但这对这种情况没有帮助。

我能想到的两件事是使用会话存储或将每个循环的结果隐藏在 HTML 中的某个地方，以便稍后我必须访问，但这两者似乎都容易出现相同的问题。

另一个想法是按下另一个按钮，以便有时间加载数据，但这增加了另一个步骤，并不理想。

有什么想法吗？

【问题讨论】：

标签： jquery ajax jquery-deferred deferred

【解决方案1】：

如果您想触发多个 ajax 调用，然后知道它们何时全部完成，有多种方法可以做到这一点。

最简单的方法是记录有多少 ajax 调用正在进行中。然后，当每个都完成时，您减少计数器（在成功处理程序中），如果计数器变为零，则在所有数据可用时调用您要执行的函数。

在伪代码中，它可以像这样用于异步 ajax 调用：

function runAjaxRequests(listOfRequests) {
    var ajaxCntr = listOfRequests.length;
    var ajaxResults = [];

    // fire off all the ajax requests
    for (var i = 0; i < listOfRequests.length; i++) {
        $.ajax(..., function(data) {
            // ajax success handler

            // store data returned from this request into ajaxResults
            ajaxResults.push(...);

            // see if all ajax requests are now done
            --ajaxCntr;
            if (ajaxCntr == 0) {
                // all data has been returned, we can process it now
                processAllAjaxData(ajaxResults);
            }
        })
    }
}

【讨论】：

就这么简单。我显然已经盯着它看太久了！非常感谢。

【解决方案2】：

我有一个类似的用例。我通过制作async:false 并将每个结果附加到父变量中来实现它。查看下面的代码。

            fileArr = ['1.csv', '2.csv']
            var csvObjArr = []
            for (var i in fileArr) {
                $.ajax({
                    type : "GET",
                    url : _default_base_dir + fileArr[i],
                    dataType : "text",
                    async: false,
                    success : function(data) {
                        // Appending every results in csvObjArr
                        csvObjArr = csvObjArr.concat($.csv.toObjects(data));
                    }
                }); 
            }
            //At this point all ajax are completed
            processData(csvObjArr)

警告这段代码会让ajax调用一个接一个。您需要考虑到它，因为它可能会减慢不必要的速度。高温

【讨论】：