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

Question

我有一个基于此水果 id 的具有超过 400 个数据 id 的数组，我将在 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 次加载数据，如下所示：

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 = [];

        }
    }
}

}

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

希望对你有帮助