我正在做一个有Angular 的项目,它有一个相当简单的mat-table,根据用户的输入,单元格会得到特定的颜色和附加的文本。对较小的数据集,按顺序运行所有函数的更新工作正常,但当表开始变成数千个时,检查速度会大大减慢,所以我的想法是,所有这些检查,或者至少是一批检查,需要并行运行。
我对打字脚本还是个新手,而且我是在一种边学边用的情况下被扔进去的,所以我不完全确定如何正确地进行并行处理。到目前为止,我已经尝试了async和promise.all,但似乎没有一个能为我做到这一点。我正在研究一个名为parallell-promises的NPM包。并且我似乎记得在使用vanilla javascript时使用settimeout()来执行类似的操作。
我的问题是让并行函数调用工作的最佳实践是什么?
下面是我的代码:
async setCellDisplay(tagName, upperLimit, lowerLimit){
var valueColumns = document.getElementsByClassName(tagName + "_valueColumn");
let valueColumnsArr = [].map.call(valueColumns, elem => elem);
const result = await Promise.all(valueColumnsArr.map(async cell => this.setCellDisplayByValue(cell, tagName, upperLimit, lowerLimit, tagPercentAboveCount, tagPercentBelowCount, valueColumnsArr.length)));
this.displayRowsByFilter();
}
async setCellDisplayByValue(valueColumn, tagName, upperLimit, lowerLimit){
var stringValue = valueColumn.innerHTML;
if(stringValue != undefined){
var row = valueColumn.parentElement;
stringValue = stringValue.replace('▲', "").replace('▼', '').replace(' ', "");
var value = parseFloat(stringValue);
if(value != NaN){
$("#"+valueColumn.id).text(value.toFixed(4).toString());
$("#"+valueColumn.id).css("color", "black")
$("#"+valueColumn.id).removeClass(tagName + "_exceedLimitClass");
if(value > upperLimit){
$("#"+valueColumn.id).text("▲ " + value.toFixed(4));
$("#"+valueColumn.id).css("color", "green");
$("#"+valueColumn.id).removeClass(tagName + "_exceedLimitClass");
}
if(value < lowerLimit){
$("#"+valueColumn.id).text("▼ " + value.toFixed(4));
$("#"+valueColumn.id).css("color", "red");
$("#"+valueColumn.id).removeClass(tagName + "_exceedLimitClass");
}
}
}
this.displayRowsByFilter();
}
谢谢你的帮助!
1条答案
按热度按时间rslzwgfq1#
我不知道你原来的代码看起来怎么样,但是你用
document.getElementsByClassName
发布的代码对我来说就是不太合适。在angular中,我们很少这样查询DOM,大多数时候,我们让angular为我们更新它。
所以我的建议是先写“适当的”Angular 代码,然后寻找类似
change detection onpush
或run code outside zone
的代码。我不会说通过settimeout来分块数据或调度是错误的,但对我来说,应该用另一种方式来完成,innerhtml,parentElement,只是对于纯js。