javascript - 在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 等等。优先考虑可视区域。请提供建议和一些想法
解决方案
关于使用情况,您可以尝试按 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 = [];
}
}
}
}
或者当元素的一部分在视口中可见时,您可以一一加载数据。
希望这有所帮助
推荐阅读
- flutter - 如何从 carousel_pro 颤振中传输图像的 ID
- java - MSSQL:为什么在我更新实体后 findAll 不起作用 - Spring Boot JPA
- ssh-keygen - ssh-keygen -l -f 文件因 dsa 密钥内容而失败
- javascript - 未捕获的语法错误:无法在模块 Vue 3 PWA Workbox 之外使用导入语句
- android - 为什么我们需要为 DataBinding 和 LiveData 扩展 ```ViewModel()``` 来创建 LiveData 对象
- apache-spark - Spark - 我无法在本地模式下增加任务数量
- android - Android 应用程序布局在相同宽高比设备上显示不同
- ubuntu - 在 Linux-ARM64 上的 GUI 中显示 /dev/videoX 提要
- python - 带有输入 csv 和输出表以及绘图 png 文件的 GUI
- python - 正则表达式中缺少某些内容?