首页 > 解决方案 > 在for循环中调用rest api并使用角度js处理可视区域的优先级

问题描述

我有一个基于此水果 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 等等。优先考虑可视区域。请提供建议和一些想法

标签: javascriptjqueryangularjsangularjs-service

解决方案


关于使用情况,您可以尝试按 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 = [];

        }
    }
}

}

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

希望这有所帮助


推荐阅读