Typescript中的多线程/并行处理

vcirk6k6  于 2022-11-18  发布在  TypeScript
关注(0)|答案(1)|浏览(872)

我正在做一个有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();
    }

谢谢你的帮助!

rslzwgfq

rslzwgfq1#

我不知道你原来的代码看起来怎么样,但是你用document.getElementsByClassName发布的代码对我来说就是不太合适。
在angular中,我们很少这样查询DOM,大多数时候,我们让angular为我们更新它。
所以我的建议是先写“适当的”Angular 代码,然后寻找类似change detection onpushrun code outside zone的代码。
我不会说通过settimeout来分块数据或调度是错误的,但对我来说,应该用另一种方式来完成,innerhtml,parentElement,只是对于纯js。

相关问题