在for循环中调用rest api并使用angular js处理可视区域的优先级

Question

我有一个基于这个水果ID的数据ID超过400的数组我将在for循环中运行其余的api调用以获得每个水果的相关信息。对于小规模的列表我能够实现但是数量巨大id是它未能击中api。所以如果一个api调用完成，我计划打5比5意味着我们应该在循环中添加一个api调用。这里的问题是我不能如何实现这个和我也需要在用户向下滚动到某个区域的情况下意味着我应该对可视区域进行api调用，并希望给予高优先级。请提供您的建议和帮助。以下是示例代码：

function getidList() {
              var dList = SessionService.fList();
           //dList have the fruit ids once its done

            if (dList.length > 0) {
                for (var i = 0; i<=5; i++) {
                                       var data = dList[i];
//here i have call the service for api call//
         fruitService.getFruitDetails(data, sessionID, getresponse);



                }
            }
//following code is service
function getFruitDetails(){
                var Data = { SessionID: sessionId, fID: fruit}
                http.callEx('GetallListData', Data).then(function (response) {
                    console.info("api", response);
                    dataobj[response.fruit.ID] = getfListData(response.fruitData);
                    fruitListModel.push(dataobj);
                    return getresponse(fruitListModel);
                });
}

所以这里的问题是页面挂起我加载页面。我不知道如何处理api调用一旦完成前5和下一个5所以优先考虑可视区域。优先提供建议和一些想法

Answer 1

关于使用情况，您可以尝试加载5乘5的数据，如下所示：

function getidList() {

var dList = SessionService.fList();

var dlength = dList.length;

if (dlength > 0) {
    var data = [];
    for (var i = 0; i < dlength; i++) {

        data.push(dList[i]);

        if(i%5 === 0 || i === dlength - 1) {

            fruitService.getFruitDetails(data, sessionID, getresponse); // not your function signature though

            data = [];

        }
    }
}

}

或者，当视口中可见部分元素时，您可以逐个加载数据。

希望这有所帮助